[React,react-hooks,closure]そのstate更新がうまくいかないのは、stale-closureのせいかも? - Qiita

はじめに Reactで非同期処理を用いてStateを更新する際、処理の書き方に気をつけないとクロージャの性質によって最新の値を基にStateが更新されないことがある。 useEffectで値のSubscribeをしてるときなどは、特に注意が必要である。(筆者はこれでハマったため) 本稿は、stale-closure(古くなったクロージャ)が引き起こすstate更新での問題とは何か？とその解決策を解説する。 stale-closureによってどんな問題が起きるか 例えば、以下のようにsetIntervalを用いて1秒ごとにカウントアップを行うプログラムがあったとする。 CodeSandboxはこちら import { useEffect, useState } from "react"; export default function App() { const [count, setCou