How to use callback with useState hook in react [duplicate]

by

You can use useEffect/useLayoutEffect to achieve this:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title="Threshold of over 1 reached.";
    } else {
      document.title="No threshold reached.";
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

If you want to prevent the callback from running on first render, adjust the previous version:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  const didMount = React.useRef(false);

  React.useEffect(() => {
    if (!didMount.current) {
      didMount.current = true;
      return;
    }

    if (count > 1) {
      document.title="Threshold of over 1 reached.";
    } else {
      document.title="No threshold reached.";
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

More about it over here.

More Related Contents:

  1. Infinite loop in useEffect
  2. How to use `setState` callback on react hooks
  3. React-hooks. Can’t perform a React state update on an unmounted component
  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. How to sync props to state using React hooks : setState()
  11. useNavigate() may be used only in the context of a component
  12. Testing React components that fetches data using Hooks
  13. Why React useState with functional update form is needed?
  14. React.useState does not reload state from props
  15. React: useState or useRef?
  16. How do react hooks determine the component that they are for?
  17. useReducer Action dispatched twice
  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. React – Is useState ‘s setter function able to change?
  27. Passing array to useEffect dependency list
  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