エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
useEffect内でsetTimeoutを使用する時の注意 - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
useEffect内でsetTimeoutを使用する時の注意 - Qiita
TL;DR useEffect内でsetTimeoutを使用するときは、ちゃんとクリーンアップ処理を書きましょう。 useEffe... TL;DR useEffect内でsetTimeoutを使用するときは、ちゃんとクリーンアップ処理を書きましょう。 useEffect(() => { let timeoutId = setTimeout(() => { // 5秒経過したら閉じる setIsOpen(false) }, 5000) // こういう処理を書く + return () => { + clearTimeout(timeoutId) + } }, []) クリーンアップ処理がないと起こりうるつらさ コンポーネント状態が更新され、かつその状態がsetTimeoutの設定に依存している場合、意図しない動きをするケースがあるからです。 例えば数秒待機して自動で閉じるモーダルを実装するとします。 この場合、コンポーネントの実装としては以下のようになるかと思います。 const Modal = () => { const