事件侦听器函数中无法访问React hooks值

Question

I decided to use React hooks for my component using windom width and resize event listener. The problem is that I can't access current value that I need. I get nested value that was set while adding event listener.

Passing function to value setter function is not a solution for me because it's forcing render and breaking my other functionalities.

I am attaching minimalistic example to present core problem:

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';

const App = () => {
  const [width, setWidth] = useState(0);

  const resize = () => {
    console.log("width:", width); // it's always 0 even after many updates
    setWidth(window.innerWidth);
  };

  useEffect(() => {
    resize();
    window.addEventListener("resize", resize);
    return () => window.removeEventListener("resize", resize);
  }, []);

  return <div>{width}</div>;
}

render(<App />, document.getElementById('root'));

LIVE DEMO IS HERE

Please for help.

Answer 1

Every render you get a new copy of resize function. Each copy captures the current value of width . Your listener has a copy which was created on the first render with width = 0 .

To fix this issue you have several options:

1. Update listeners when width changes

    useEffect(() => { resize(); window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); }, [width]); 

2. Use functional updates to get the current width inside listener

    const resize = () => { setWidth(oldWidth => { console.log("width:", oldWidth); return window.innerWidth }); }; 

3. Store the width in a mutable reference

    const widthRef = useRef(width); const resize = () => { console.log("width:", widthRef.current); widthRef.current = window.innerWidth; setWidth(window.innerWidth); }; 

Answer 2

Another way to get data is to set variable out of the component

DEMO

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';

//******* 
const appData = {
      width:0
}
//*******

const App = () => {
  const [width, setWidth] = useState(0);

  const resize = () => {
    //******* get width
    console.log('===>',appData.width);
    //*******

    console.log("width:", width); // it's always 0 even after many updates
    setWidth(window.innerWidth);
    //******* update width
    appData.width = window.innerWidth;
    //*******
  };

  useEffect(() => {
    resize();
    window.addEventListener("resize", resize);
    return () => window.removeEventListener("resize", resize);
  }, []);

  return <div>{width}</div>;
}

render(<App />, document.getElementById('root'));