React Hooks useState+useEffect+event gives stale state

by

value is stale in the event handler because it gets its value from the closure where it was defined. Unless we re-subscribe a new event handler every time value changes, it will not get the new value.

Solution 1: Make the second argument to the publish effect [value]. This makes the event handler get the correct value, but also causes the effect to run again on every keystroke.

Solution 2: Use a ref to store the latest value in a component instance variable. Then, make an effect which does nothing but update this variable every time value state changes. In the event handler, use the ref, not value.

const [value, setValue] = useState(initialValue);
const refValue = useRef(value);
useEffect(() => {
    refValue.current = value;
});
const handleEvent = (msg, data) => {
    console.info("Value in event handler: ", refValue.current);
};

https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often

Looks like there are some other solutions on that page which might work too. Much thanks to @Dinesh for the assistance.

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. Make React useEffect hook not run on initial render
  3. Push method in React Hooks (useState)?
  4. How can I use React hooks in React classic `class` component?
  5. How to call loading function with React useEffect only once
  6. How to use componentWillMount() in React Hooks?
  7. Is it possible to share states between components using the useState() hook in React?
  8. Why is useState not triggering re-render?
  9. Updating and merging state object using React useState() hook
  10. componentDidMount equivalent on a React function/Hooks component?
  11. How to register event with useEffect hooks?
  12. React useState hook event handler using initial state
  13. Is there a generic way to set state in React Hooks? How to manage multiple states?
  14. How do I update states `onChange` in an array of object in React Hooks
  15. React Function Components with hooks vs Class Components
  16. React Hooks – What’s happening under the hood?
  17. useEffect does not listen for localStorage
  18. setTimeout for this.state vs useState
  19. Why need useRef and not mutable variable?
  20. Next.js context provider wrapping App component with page specific layout component giving undefined data
  21. Determine which dependency array variable caused useEffect hook to fire
  22. Updating state to the same state directly in the component body
  23. Do we still need functional setState way in react hooks?
  24. Proper way of using React hooks + WebSockets
  25. React hook useEffect runs continuously forever/infinite loop
  26. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  27. Equivalent to componentDidUpdate using React hooks
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. Why would we use useEffect without a dependency array?

Leave a Comment