FujjimaBlog

setStateで古いstateを見てしまった

2020/12/28 17:41

基本的なところだけど、少し悩んでしまったのでメモ。 アプリのタイマー機能を実装しようとした際、setIntervalを使用しても時間が加算されない問題が発生した。原因としては、setStateにオブジェクトを渡した場合、stateを即座にアップデートすることを保証しないというもの。 <a href="https://ja.reactjs.org/docs/faq-state.html#how-do-i-update-state-with-values-that-depend-on-the-current-state">コンポーネントの state – React</a> 今回のような、setIntervalでsetStateが呼ばれるなど参照したいstateが絶えず更新されているものである場合、「setStateに更新用の関数を渡し、その関数内の引数で最新のstateにアクセスして操作する」のが正しい実装内容となる。 <h4>駄目な例</h4> 下記の例だと、<code>setState</code>にtimeに1を足した値を引数として渡しているが、この時にtimeが参照しているのは更新前のtimeである。つまり、0秒から時間の加算が始まったとして、 <pre class="code lang-javascript" data-lang="javascript" data-unlink> // timeは親のコンポーネントからもらってくる数値 const [time, setTime] = useState(props.time || null); useEffect(() => { const { taskId, recordingTaskId } = props; if (taskId && taskId === recordingTaskId) { // setIntervalで時間加算の関数(addSecond)を1秒毎に実行させる setTimerId(setInterval(addSecond, 1000)); } else return; }, [props.recordingTaskId]); const addSecond = () => { // ここでsetStateに「time + 1」という値を渡してしまっているため、常に古いstateを見てしまっている setTime(time + 1); }; </pre> <h4>良い例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> // timeは親のコンポーネントからもらってくる数値 const [time, setTime] = useState(props.time || null); useEffect(() => { const { taskId, recordingTaskId } = props; if (taskId && taskId === recordingTaskId) { // setIntervalで時間加算の関数(addSecond)を1秒毎に実行させる setTimerId(setInterval(addSecond, 1000)); } else return; }, [props.recordingTaskId]); const addSecond = () => { // 更新関数を渡しているため、この中のtは最新のstateが入っていることが保証されている setTime(t => t + 1); }; </pre>