Help us understand the problem. What is going on with this article?

Reactでwindowに対して、resizeイベントを登録していた時のエラー

よくわからないエラーが発生

ReactでSemanticUIを使い始め、windowにたいして、Resizeイベントを登録していたある日のこと。

componentDidMount() {
    window.addEventListener('resize', () => {
        setState({smallScreen: window.innerWidth < 600});
    });
}

上記のコードで、動かした際に、画面をリサイズするたびに、下記のエラーが発生していた。

Warning: setState(...): Can only update a mounted or mounting component. 
This usually means you called setState() on an unmounted component.
This is a no-op. Please check the code for the ****** component.

それまでこんなエラー出てなかったもので、突然のことに困惑しつつ、所詮Warningであるからと甘えていたが、下記のようにcomponentWillUnmountイベントにてremoveEventListenerすることでで解決した。

componentWillUnmount() {
    window.removeEventListener('resize', registeredListener);
}

原因は、コンポーネントがアンマウント後も、コールバックが呼ばれていたためですね。

現在だと、React hooksつかって

const [screenIsSmall, setScreenIsSmall] = useState(false);

useEffect(() => {
    window.addEventListener('resize', () => {
        setScreenIsSmall(window.innerWidth < 600);
    });

    return () => window.removeEventListener('resize', registeredListener);
})

とすれば良いですね。

以上、現場からでした。

oedkty
無職になり、Quoraにどっぷりはまっています。
https://jp.quora.com/profile/%E5%A4%A7%E6%9E%9D-%E5%85%8B%E8%A1%8C
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away