Selectorsと不要な再レンダーの防止
selectorsで必要なstateの一部だけを取り出し、必要な場合にのみコンポーネントを再レンダーします。
「Selectorsと不要な再レンダーの防止」はCoddyKit上の無料React Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。
ようこそ
デフォルトセレクターの問題
// Bad: re-renders on every store change
const store = useAppStore();
return <p>{store.user.name}</p>;セレクターの使用
// Good: re-renders only when user.name changes
const name = useAppStore(s => s.user.name);
return <p>{name}</p>;参照の同値性チェック
// Creates a new object every time — always re-renders!
const info = useStore(s => ({ id: s.id, name: s.name }));シャロー等価性での修正
import { shallow } from 'zustand/shallow';
const info = useAppStore(
s => ({ id: s.id, name: s.name }),
shallow // compare by content, not reference
);複数の値の選択
const { items, loading } = useCartStore(
s => ({ items: s.items, loading: s.loading }),
shallow
);安定したアクションの参照
// Actions are always stable — no shallow needed
const addToCart = useCartStore(s => s.addToCart);useShallowヘルパー（Zustand v5以降）
import { useShallow } from 'zustand/react/shallow';
const { items, loading } = useCartStore(
useShallow(s => ({ items: s.items, loading: s.loading }))
);セレクターの組み合わせ
const totalPrice = useCartStore(
s => s.items.reduce((sum, item) => sum + item.price, 0)
);Zustandの再レンダリングのプロファイリング
確認問題
まとめ
次のレッスン
よくある質問
「Selectorsと不要な再レンダーの防止」レッスンは無料ですか？
はい。「Selectorsと不要な再レンダーの防止」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。
「Selectorsと不要な再レンダーの防止」で何を学びますか？
selectorsで必要なstateの一部だけを取り出し、必要な場合にのみコンポーネントを再レンダーします。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
React Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Selectorsと不要な再レンダーの防止」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このReact Academyレッスンでコードを書いて実行できますか？
はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 最初のZustand Storeを作成する
- Selectorsと不要な再レンダーの防止
- Persist MiddlewareによるStateの永続化
- Zustand DevToolsとStoreのテスト