React hooks: accessing up-to-date state from within a callback

by

For your scenario (where you cannot keep creating new callbacks and passing them to your 3rd party library), you can use useRef to keep a mutable object with the current state. Like so:

function Card(title) {
  const [count, setCount] = React.useState(0)
  const [callbackSetup, setCallbackSetup] = React.useState(false)
  const stateRef = useRef();

  // make stateRef always have the current count
  // your "fixed" callbacks can refer to this object whenever
  // they need the current value.  Note: the callbacks will not
  // be reactive - they will not re-run the instant state changes,
  // but they *will* see the current value whenever they do run
  stateRef.current = count;

  function setupConsoleCallback(callback) {
    console.log("Setting up callback")
    setInterval(callback, 3000)
  }

  function clickHandler() {
    setCount(count+1);
    if (!callbackSetup) {
      setupConsoleCallback(() => {console.log(`Count is: ${stateRef.current}`)})
      setCallbackSetup(true)
    }
  }


  return (<div>
      Active count {count} <br/>
      <button onClick={clickHandler}>Increment</button>
    </div>);

}

Your callback can refer to the mutable object to “read” the current state. It will capture the mutable object in its closure, and every render the mutable object will be updated with the current state value.

More Related Contents:

  1. How can I use multiple refs for an array of elements with hooks?
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. React hooks – right way to clear timeouts and intervals
  5. Invalid hook call. Hooks can only be called inside of the body of a function component
  6. React Hooks useState() with Object
  7. Can I set state inside a useEffect hook
  8. How to call an async function inside a UseEffect() in React?
  9. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  10. Where can I make API call with hooks in react?
  11. Multiple calls to state updater from useState in component causes multiple re-renders
  12. What’s the difference between `useRef` and `createRef`?
  13. How can I force a component to re-render with hooks in React?
  14. Executing async code on update of state with react-hooks
  15. React Hooks – What’s happening under the hood?
  16. Why React Hook useState uses const and not let
  17. How to change the value of a Context with useContext?
  18. How to prevent re-rendering of components that have not changed?
  19. How target DOM with react useRef in map
  20. How to programmatically clear/reset React-Select?
  21. React Hooks Error: Hooks can only be called inside the body of a function component
  22. Next.js context provider wrapping App component with page specific layout component giving undefined data
  23. React hooks: call component as function vs render as element
  24. React hooks useState setValue still rerender one more time when value is equal
  25. Why can’t React Hooks be called inside loops or nested function?
  26. How to set initial state for useState Hook in jest and enzyme?
  27. useMemo vs. useEffect + useState
  28. Equivalent to componentDidUpdate using React hooks
  29. Updating state to the same value directly in the component body during render causes infinite loop
  30. React Hooks render twice

Leave a Comment