Why React useState with functional update form is needed?

by

State update is asynchronous in React. So it is possible that there would be old value in count when you’re updating it next time. Compare, for example, result of these two code samples:

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1); 
        setCount(prevCount => prevCount + 1)}
      }>+</button>
    </>
  );
}

and

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => {
        setCount(count + 1); 
        setCount(count + 1)}
      }>+</button>
    </>
  );
}

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. Infinite loop in useEffect
  3. How to use `setState` callback on react hooks
  4. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  5. In useEffect, what’s the difference between providing no dependency array and an empty one?
  6. React useState cause double rendering
  7. How to use throttle or debounce with React Hook?
  8. React useReducer async data fetch
  9. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  10. useNavigate() may be used only in the context of a component
  11. Testing React components that fetches data using Hooks
  12. React.useState does not reload state from props
  13. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  14. React: useState or useRef?
  15. How do react hooks determine the component that they are for?
  16. useReducer Action dispatched twice
  17. React Hooks – Modified state not reflecting immediately
  18. Attempted import error: ‘useHistory’ is not exported from ‘react-router-dom’
  19. is it possible to React.useState(() => {}) in React?
  20. React Hooks – How do I implement shouldComponentUpdate?
  21. React hook rendering an extra time
  22. Field Array in React using formik
  23. How to test a react component that is dependent on useContext hook?
  24. What is the expected return of `useEffect` used for?
  25. ReactJS – prevState in the new useState React hook?
  26. How to create dynamic refs in functional component- Using useRef Hook
  27. React – Is useState ‘s setter function able to change?
  28. Which react hook to use with firestore onsnapshot?
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment