React Function Components with hooks vs Class Components

by

The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.

The docs mention few really good reason to make use of Hooks instead of classes

It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code

Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two

Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.

function components with hooks can’t help in perf as class
components does. They can’t skip re-renders as they don’t have
shouldComponentUpdate implemented.

Function component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator

The idea is to be able write the code that you can write using React class component using function component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.

Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with function components

However one reason that you should still go for Class components over the function components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn’t as intuitive as it is with lifecycle methods.

Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out it’s better to use Class

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. Wrong React hooks behaviour with event listener
  5. React hooks – right way to clear timeouts and intervals
  6. React Hooks useState() with Object
  7. Where can I make API call with hooks in react?
  8. Multiple calls to state updater from useState in component causes multiple re-renders
  9. What’s the difference between `useRef` and `createRef`?
  10. How can I force a component to re-render with hooks in React?
  11. Executing async code on update of state with react-hooks
  12. Why React Hook useState uses const and not let
  13. How to change the value of a Context with useContext?
  14. How to prevent re-rendering of components that have not changed?
  15. How target DOM with react useRef in map
  16. How to programmatically clear/reset React-Select?
  17. React Hooks Error: Hooks can only be called inside the body of a function component
  18. React hooks: call component as function vs render as element
  19. React hooks useState setValue still rerender one more time when value is equal
  20. React Hooks useState+useEffect+event gives stale state
  21. How to add “refs” dynamically with react hooks?
  22. Why can’t React Hooks be called inside loops or nested function?
  23. How to set initial state for useState Hook in jest and enzyme?
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. React Hook “useEffect” is called conditionally
  26. Equivalent to componentDidUpdate using React hooks
  27. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment