React – Is useState ‘s setter function able to change?

by

The setter function won’t change during component life.

From Hooks FAQ:

(The identity of the setCount function is guaranteed to be stable so it’s safe to omit.)

The setter function (setState) returned from useState changes on component re-mount, but either way, the callback will get a new instance.

It’s a good practice to add state setter in the dependency array ([setState]) when using custom-hooks. For example, useDispatch of react-redux gets new instance on every render, you may get undesired behavior without:

// Custom hook
import { useDispatch } from "react-redux";

export const CounterComponent = ({ value }) => {
  // Always new instance
  const dispatch = useDispatch();

  // Should be in a callback
  const incrementCounter = useCallback(
    () => dispatch({ type: "increment-counter" }),
    [dispatch]
  );

  return (
    <div>
      <span>{value}</span>

      // May render unnecessarily due to the changed reference
      <MyIncrementButton onIncrement={dispatch} />

      // In callback, all fine
      <MyIncrementButton onIncrement={incrementCounter} />
    </div>
  );
};

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to use `setState` callback on react hooks
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. Does React batch state update functions when using hooks?
  5. How to use callback with useState hook in react [duplicate]
  6. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  7. In useEffect, what’s the difference between providing no dependency array and an empty one?
  8. With useEffect, how can I skip applying an effect upon the initial render?
  9. How to use throttle or debounce with React Hook?
  10. React Hook : Send data from child to parent component
  11. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  12. Set types on useState React Hook with TypeScript
  13. Stop useEffect from running on mount
  14. How to sync props to state using React hooks : setState()
  15. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  16. React.useState does not reload state from props
  17. React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function
  18. React: useState or useRef?
  19. Lazy initial state – What it is and how to use it?
  20. Does a render happen before function in React Hooks useEffect is called?
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks – Modified state not reflecting immediately
  23. React Hooks: Why is .current null for useRef Hook?
  24. React hook rendering an extra time
  25. Field Array in React using formik
  26. How to test a react component that is dependent on useContext hook?
  27. What is the expected return of `useEffect` used for?
  28. ReactJS – prevState in the new useState React hook?
  29. How to create dynamic refs in functional component- Using useRef Hook
  30. Which react hook to use with firestore onsnapshot?

Leave a Comment