How to use `setState` callback on react hooks

by

You need to use useEffect hook to achieve this.

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

If you want the useEffect callback to be ignored during the first initial render, then modify the code accordingly:

import React, { useEffect, useRef } from 'react';

const [counter, setCounter] = useState(0);
const didMount = useRef(false);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
  // Return early, if this is the first render:
  if ( !didMount.current ) {
    return didMount.current = true;
  }
  // Paste code to be executed on subsequent renders:
  console.log('Do something after counter has changed', counter);
}, [counter]);

More Related Contents:

  1. Lazy initial state – What it is and how to use it?
  2. How to fix missing dependency warning when using useEffect React Hook
  3. How to compare oldValues and newValues on React Hooks useEffect?
  4. Does React batch state update functions when using hooks?
  5. React-hooks. Can’t perform a React state update on an unmounted component
  6. With useEffect, how can I skip applying an effect upon the initial render?
  7. React useState cause double rendering
  8. React Hook : Send data from child to parent component
  9. React useReducer async data fetch
  10. Line 0: Parsing error: Cannot read property ‘map’ of undefined
  11. In general is it better to use one or many useEffect hooks in a single component? [closed]
  12. React hooks useEffect only on update?
  13. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  14. Set types on useState React Hook with TypeScript
  15. Stop useEffect from running on mount
  16. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  17. React Hooks: how to wait for the data to be fetched before rendering
  18. useReducer Action dispatched twice
  19. Does a render happen before function in React Hooks useEffect is called?
  20. React Hooks – Modified state not reflecting immediately
  21. React Hooks – Modified state not reflecting immediately
  22. React Hooks: Why is .current null for useRef Hook?
  23. is it possible to React.useState(() => {}) in React?
  24. React Hooks – How do I implement shouldComponentUpdate?
  25. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  26. How to create dynamic refs in functional component- Using useRef Hook
  27. Put A Warning If Page Refresh in ReactJS
  28. Passing array to useEffect dependency list
  29. How do I window removeEventListener using React useEffect
  30. React Hook useEffect has a missing dependency: ‘list’

Leave a Comment