React: Difference between a Stateful Class Component and a Function Component using Hooks?

Question

I've just created a function component which contains the expression const [state, setState] = useState(). Now that I have access to state and setState(), this stateful function component is very similar to a stateful class component. I'm only aware of two differences between this component and a typical class component: when referring to the state we must use state.handle instead of this.state.handle, and we have easy access to the Context API outside of the render method.

Aside from the differences that I found already, is there any difference between this stateful function component and a stateful class component? Am I incorrect in my above assertion?

To refine this question just a bit, is there anything a Class Component can do that a Function Component with Hooks can't do?

Blether

Edit Note: It's Function Component, not Functional. – Frenetic

Answer 1

Before The Hooks:

• There was a clear separation between Stateful and Stateless Components.
• You use write Classes when you want your component to have some state, and you use the Function components when you think your component won’t require any state.

After Hooks:

• With the introduction of Hooks, we can create stateful components without using classes.

• We can use functions to create stateful components.

Helpful Articles

• Article 1

• Article 2

As Sung M. Kim said there are 3 life-cycle hooks that is not implemented yet in react hooks.

1. getDerivedStateFromProps

As mentioned in the docs, getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props.

You can achieve the same using useEffect & useState hooks. useEffect accept as a second parameter an array of dependent variables to that will cause the useEffect to rerun, so you can do the following:

  const [state1, changeState1] = useState(props.prop1);

useEffect(() => {
    changeState1(props.prop1)
}, [props.prop1]);

2. componentDidCatch

3. getDerivedStateFromError

This hooks catch errors in the children tree except the following (docs):

Event handlers (learn more) Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) Server side rendering Errors thrown in the error boundary itself (rather than its children)

Thralldom

This seems to confirm what I'm thinking. I added an extra line to the bottom of my question to narrow this down further. – Blether

Function components doesn't have hooks to componentDidCatch, getDerivedStateFromError and getDerivedStateFromProps. First two are for creating Error Boundary and the latter isn't implemented yet thus still use Class Components. – Frenetic

Answer 2

There are a lot of differences between a function and a class, and they show up in the syntax. Furthermore, lifecycle methods in component classes are different than hooks in component functions. But the bottom line is that you aren’t missing any functionality by using function components. In fact function components with hooks are now the default way to create react components. Lots more here:

https://reactjs.org/docs/hooks-intro.html

Pvc