What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?

by

Is it correct that this.setState in class components always cause a
re-render, even when the new state value is identical to the previous?

If you set a valid value apart from returning null within setState, a re-render will always be triggered by react in a class component unless your component is a PureComponent or you implement shouldComponentUpdate

Is it correct that in function components with hooks, setState from
useState only causes a re-render if the state value is different from
the previous value?

For a functional component using useState hook, the setter if called with the same state will not trigger a re-render. However for an occasional case if the setter is called immediately it does result in two renders instead of one

Is setting state with this.setState inside the render method of a
class component, the same as setting state inside the function body of
a function component with hooks?

Techincally yes, setting a state directly in render method will cause the function to trigger re-render in case of class component causing an infinite loop which is the case for functional components provided the state values are different. Regardless of that, it will still cause an issue because any other state update will be reverted back due to functional component calling state update directly

In a class component, if we set state in the render method an infinite
loop will occur. This is because the class component does not care
that the new state is the same as the previous state. It just keeps
re-rendering on every this.setState.

Yes, hence its recommended not to call setState directly in render

In a function component with hooks however, setting state inside the
function body (which runs at re-render similarly to the render method
in class components) would not be an issue, because the function
component just bails out of re-renders when it sees that the state is
identical to the previous state.

Not 100% true, since you can trigger state update using previous value such that the previous and current value are not same.For example

setCount(count => count + 1);

In such a case, you component will still fall in an infinite loop

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. State not updating when using React state hook within setInterval
  3. Make React useEffect hook not run on initial render
  4. How can I use React hooks in React classic `class` component?
  5. How to call loading function with React useEffect only once
  6. How to use componentWillMount() in React Hooks?
  7. Why is useState not triggering re-render?
  8. Updating and merging state object using React useState() hook
  9. componentDidMount equivalent on a React function/Hooks component?
  10. react useEffect comparing objects
  11. How to register event with useEffect hooks?
  12. Is there a generic way to set state in React Hooks? How to manage multiple states?
  13. How do I update states `onChange` in an array of object in React Hooks
  14. React Function Components with hooks vs Class Components
  15. React Hooks – What’s happening under the hood?
  16. useEffect does not listen for localStorage
  17. setTimeout for this.state vs useState
  18. How does JavaScript mechanism behind react hooks work?
  19. What is useState() in React?
  20. Why need useRef and not mutable variable?
  21. Next.js context provider wrapping App component with page specific layout component giving undefined data
  22. Determine which dependency array variable caused useEffect hook to fire
  23. Updating state to the same state directly in the component body
  24. Proper way of using React hooks + WebSockets
  25. React hook useEffect runs continuously forever/infinite loop
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. React Hook “useEffect” is called conditionally
  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