React useState hook event handler using initial state

by

useRef to read future value

Currently, your issue is that you’re reading a value from the past. When you define handleResize it belongs to that render, therefore, when you rerender, nothing happens to the event listener so it still reads the old value from its render.

To fix this, you should use a ref via useRef that you keep updated so that you can read the current value.

Example (link to jsfiddle):

  const [activePoint, _setActivePoint] = React.useState(null);

  // define a ref
  const activePointRef = React.useRef(activePoint);

  // in place of original `setActivePoint`
  const setActivePoint = x => {
    activePointRef.current = x; // keep updated
    _setActivePoint(x);
  };

  const handleResize = () => {
    // now when reading `activePointRef.current` you'll
    // have access to the current state
    console.log(activePointRef.current);
  };

  const resizerMouseDown = /* still the same */;

  return /* return is still the same */

More Related Contents:

  1. Why React Hook useState uses const and not let
  2. What do multiple arrow functions mean in JavaScript?
  3. Arrow function without curly braces
  4. React useEffect in depth / use of useEffect?
  5. Is useState synchronous? [duplicate]
  6. React hooks – right way to clear timeouts and intervals
  7. React Native: require() with Dynamic String?
  8. Concatenating variables and strings in React
  9. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  10. What is the difference between using constructor vs state = {} to declare state in react component?
  11. Multiple calls to state updater from useState in component causes multiple re-renders
  12. How can I force a component to re-render with hooks in React?
  13. Arrow functions and the use of parentheses () or {} or ({})
  14. What does calling super() in a React constructor do?
  15. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  16. How to prevent re-rendering of components that have not changed?
  17. React.js ES6 avoid binding ‘this’ to every method
  18. How to programmatically clear/reset React-Select?
  19. React Hooks Error: Hooks can only be called inside the body of a function component
  20. map function not working in React
  21. Why can’t React Hooks be called inside loops or nested function?
  22. How to set initial state for useState Hook in jest and enzyme?
  23. React cannot read property map of undefined
  24. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  25. What are the differences when re-rendering after state was set with Hooks compared to the class-based approach?
  26. Performance penalty of creating handlers on every render with react-hooks
  27. Function inside functional component in React hooks – Performance
  28. Deep nested array of objects not rendering
  29. import * as React from ‘react’; vs import React from ‘react’;
  30. Why would we use useEffect without a dependency array?

Leave a Comment