Functional components have better performance than Class components?

Question

Before react hooks, we called functional components to stateless components. At that time it was really faster than class components but what about now?

Since we have react hooks, stateless components are no longer precise. Does the functional components are faster than class components which runs same functions?

e.g. In functional components,

I can handle state variables by using useState hook.
useEffect can represent componentDidMount, componentWillReceiveProps or some other lifecycle methods in Class component.
... ... ...

We have many other hook functions but which hooks will make my class components faster or lightweight?

user_14570144 · Answer

Using React hooks will definitely reduce the amount of code you have to write in comparison to class based components.They are much easier to read and debug. In sense of Performance , in class components :

Cleaning up and applying the effect after every render is task heavy, and we might right run into issues or bugs.

so overall Hooks is a better option. source

user_9135078 · Answer

Both functional and class components in React offer the same functionality. You shouldn't miss anything when using any of the approaches and then you shouldn't differ in rendering performances.

In general, you write less code by using a functional component. This will be more understandable by your colleagues

user_2350941 · Answer

According to the docs, there is no difference in terms of performance: https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

Functional components have better performance than Class components?

3 Answers