バグを直したら useEffect が消えた

2026-08-17 Ginza.js #11 での発表資料です。

AI でホームページを作るサービスのサイトエディタで、状態管理の失敗を2つして、2つとも同じ形で直した話をしました。

ざっくり説明すると、「履歴に入れない」「同時に1つだけ」といったルールを、毎回コードで気をつけて守るのをやめて、そもそも壊れない構造に変えた結果、useEffect が不要になりました、という内容です。

発表用の資料のため、口頭で補った部分はスライドに含まれていません。
特に次の3点は、資料だけでは伝わりにくいと思います。

- それぞれのコードが、実際にどう壊れていたか
- 「呼び忘れ」「消し忘れ」が具体的に何を指しているか
- 直したあとに気づいた、React 公式ドキュメントとの一致

参考にした公式ドキュメント
https://react.dev/learn/you-might-not-need-an-effect
https://react.dev/learn/sharing-state-between-components

Transcript

1. バグを直したら useEffect が消えた サイトエディタの状態管理の作り直し GMOペパボ株式会社 ロリポップ‧ムームードメイン事業部 エンジニア @taki Ginza.js#11 2026.08.17 1
2. ⾃⼰紹介 ロリポップ‧ムームードメイン事業部 taki 2025年 新卒⼊社 猫と星とお絵描きが好きなエンジニア 『LOLIPOP! AIホームページ』の開発をしています - Twitter : @taki73_cat - noteも書いています - 最近npmパッケージ開発に⼿を出しました 2
3. 本⽇の題材 LOLIPOP! AIホームページ 3
4. 本⽇の題材 エディタにおける状態管理 4
5. 本⽇の結論 “ ⼈が気をつけるのをやめる。 仕組みで防ぐ。” 5
6. 前提 redo/undoが要件 - サイトの編集画⾯には redo/undo が必要 - Container というコンポーネントに useState が 15 個 → Zustand + zundo に移した - zundo = Zustand の履歴ミドルウェア 6
7. 【失敗1】 1箇所でも忘れたら undo が壊れる 7
8. 失敗1 2種類の状態を1つのストアで管理 サイトの中⾝ - ⾒出しの⽂字 - ⾊ - セクションの並び順 エディタの状態 - 開いているタブ (テーマタブ, サイト設定タブ) - 選択中の要素 ユーザーが編集するデータ エディタ操作に必要なデータ undoで戻したい undoで戻したくない 8
9. 失敗1 9
10. 解決 解決：2種類を2つのストアに分ける サイトの中⾝ エディタの状態 - ⾒出しの⽂字 - 開いているタブ - ⾊ - 選択中の要素 - セクションの並び順 ユーザーが編集するデータ undoで戻したい エディタ操作に必要なデータ undoで戻したくない useContentStore useUIStore (履歴あり) (履歴なし) → pause で囲む必要がなくなり、 呼び忘れが起きない仕組みになった 10
11. 【失敗2】 ツールバーが2つ出てしまう 11
12. 失敗2 ツールバーが複数表⽰される ツールバーは1つだけ、 のはずだった 12
13. 失敗2 3回直して、useEffect が⽣えた 直すたびに state が増えて、最後に useEffect が⽣えた 13
14. 失敗2 14
15. 失敗2 私が書いていたのは、これと同じだった Adjusting some state when a prop changes https://react.dev/learn/you-might-not-need-an-effect 15
16. 解決 解決：6つの state を1つにまとめる → 消し忘れが起きない仕組みになり、useEffectが消えた 16
17. 答え合わせ 公式チュートリアルに同じ話がありました react.dev「Sharing State Between Components」 アコーディオンを⼀度に1つだけ開く例 - 各 Panel が isActive を持つ - 親が activeIndex を1つ持つ → 2つ同時に開く → 1つだけ開く https://react.dev/learn/sharing-state-between-components 17
18. ただし 全部を親に上げればいいわけではない - カーソルは物理的に1つで、2つ同時にホバーできない - 複雑になるのを防ぐため、ホバーは親に上げない 18
19. まとめ なぜ useEffect が消えたのか Effects are an escape hatch from the React paradigm. https://react.dev/learn/escape-hatches#you-might-not-need-an-effect - 消えた useEffect: React の中の state を、React の中の prop に合わせていた - 残っている useEffect: contenteditable や IME との同期（React の外） useEffect が悪いのではなく、使う場所が違った 19
20. まとめ ⼈が気をつけるのをやめる。 仕組みで防ぐ。 20
21. おわり ご清聴ありがとうございました！ @taki73_cat 21