Breaking News: Grepper is joining You.com. Read the official announcement!

react addeventlistener ignoring usestate

Lucius Vinicius answered on March 12, 2023 Popularity 2/10 Helpfulness 1/10

answer react addeventlistener ignoring usestate

react addeventlistener ignoring usestate

Comment

// Credits to: https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

// Instead of using the "useState" variables directly, create a useRef variable
// that calls the "setState". On the eventListener, use the Ref variable instead
// of the state itself.

// Example with error:

const App = () => {
  const [myState, setMyState] = React.useState(0);

  const listener = () => {
    // function called whenever the user double-clicks the window.
    console.log(`state in handler: ${myState}`);
    // state in handler: always 0
  };

  React.useEffect(() => {
    window.addEventListener("dblclick", listener);
  }, []);

  return (
    <div className="App">
      <h1>State: {myState}</h1>
      <button onClick={() => setMyState(myState + 1)}>update state</button>
    </div>
  );
}

// Fixed version using useRef:

const App = () => {
  const [myState, _setMyState] = React.useState(0);

  const myStateRef = React.useRef(myState);
  const setMyState = data => {
    myStateRef.current = data;
    _setMyState(data);
  };

  const listener = () => {
    console.log(`state in handler: ${myStateRef.current}`);
    // state in handler: 1
    // state in handler: 2
    // etc...
  };

  React.useEffect(() => {
    window.addEventListener("dblclick", listener);
  }, []);

  return (
    <div className="App">
      <h1>State: {myState}</h1>
      <button onClick={() => setMyState(myState + 1)}>update state</button>
    </div>
  );
}

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: event-listener ignore javascript state use-state

Link to this answer
Share Copy Link

Contributed on Mar 12 2023

Lucius Vinicius

0 Answers Avg Quality 2/10

react addeventlistener ignoring usestate

Contents

More Related Answers

react addeventlistener ignoring usestate

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.