<h2 id="h442d4eef2d">useCallbackとは？</h2><p>関数をメモ化するのに使用する。</p><p>親コンポーネントから子コンポーネントに関数を渡している場合、親コンポーネントがレンダリングされると、渡している関数も更新されるため、関数を受け取っている子コンポーネントもレンダリングされてしまう。</p><h3 id="h551f5bf639">✅useCallback の主な目的</h3><p><span class="highlight">関数参照の変更によって子コンポーネントの再レンダリングが起きないようにする。</span></p><h2 id="h304189e888">📝useCallbackを使用する場合としない場合の比較</h2><pre><code>src/
├── components/
│   └── IncrementButton.jsx
├── hooks/
│   └── useCounter.js
└── App.jsx</code></pre><ul><li>親コンポーネント（App,js）に子コンポーネント（IncrementButton.jsx）を読み込んで、クリック時の関数をpropsで渡す。</li><li>関数はカスタムフック内（useCounter.js）で作成し、親コンポーネント（App,js）に読み込む。（カスタムフックでなく、親コンポーネントに直接関数を記載しても同じ）</li></ul><h3 id="he6d381d182">❌useCallback（ メモ化）なし：不要な再レンダリングが発生する</h3><p>📁カスタムフック｜hooks/useCounter.js</p><pre><code class="language-javascript">import { useState } from &quot;react&quot;;

const useCounter = () =&gt; {
  const [count, setCount] = useState(0);

  const increment = () =&gt; {
    setCount((prev) =&gt; prev + 1);
  };

  return { count, increment };
};

export default useCounter;</code></pre><p>📁ボタンコンポーネント｜components/IncrementButton.jsx</p><pre><code class="language-javascript">import React from &quot;react&quot;;

const IncrementButton = React.memo(({ onClick }) =&gt; {
  console.log(&quot;Button rendered&quot;);
  return &lt;button onClick={onClick}&gt;+1&lt;/button&gt;;
});

export default IncrementButton;</code></pre><h3 id="hbe36862a9b">📝React.memo</h3><p></p><p>📁親コンポーネント｜App.jsx</p><pre><code class="language-javascript">import React from &quot;react&quot;;
import useCounter from &quot;./hooks/useCounter&quot;;
import IncrementButton from &quot;./components/IncrementButton&quot;;

const App = () =&gt; {
  const { count, increment } = useCounter();

  return (
    &lt;div&gt;
      &lt;h1&gt;Count: {count}&lt;/h1&gt;
      &lt;IncrementButton onClick={increment} /&gt;
    &lt;/div&gt;
  );
};

export default App;</code></pre><ul><li>カスタムフックから、結果を表示させる<code>count</code>と関数<code>increment</code>を取得</li><li>ボタンコンポーネントに関数を<code>increment</code>渡す。</li></ul><h3 id="h14621b54db">⚡️結果：ボタンをクリックするたびにボタンコンポーネントがレンダリングされる</h3><p> ボタンをクリックすると、count の状態が変わる。その際に再レンダリングされる。<br>そしてのたびに increment 関数の参照も変わる → ボタンコンポーネントもレンダリングされ、コンソールにButton rendered が毎回表示される。</p><p>❌親コンポーネントの値だけ変わればいいのに、変化がない子コンポーネントも再レンダリングする必要はない。</p><hr><h3 id="hbc3e27c173">✅ useCallback（メモ化）あり：不要な再レンダリングを防ぐ</h3><p>📁カスタムフック｜hooks/useCounter.js</p><pre><code class="language-javascript">import { useState, useCallback } from &quot;react&quot;;

const useCounter = () =&gt; {
  const [count, setCount] = useState(0);

  const increment = useCallback(() =&gt; {
    setCount((prev) =&gt; prev + 1);
  }, []);

  return { count, increment };
};

export default useCounter;</code></pre><ul><li><code>increment関数</code>をuseCallbackでメモ化</li><li>他のコンポーネントへの変更はなし</li></ul><h3 id="hca9c1af53f">⚡️結果：increment 関数はメモ化されていて参照が変わらない → Button rendered は初回のみ表示される</h3><p>親コンポーネントの初回レンダリングで子コンポーネントもレンダリングされる。それ以降は親コンポーネントのcountの値が変わっても、関数はメモ化されているので再レンダリングされない。→子コンポーネント（ボタン）の無駄なレンダリングを防ぐことができる。</p><p></p>

useCallbackは何のために使用するのか解説

React基礎｜useCallbackとは？なぜ使用するか解説

<h2 id="h2152851616">🔍 useMemoとは？検索機能での実用例から学ぶ</h2><p>React の <code>useMemo</code> は、特定の値（依存）が変わらない限り<strong>、</strong><span class="highlight">過去に計算した値を再利用（メモ化）</span>するためのフック。<br>これにより、無駄な再計算を防ぎ、パフォーマンスを最適化できる。</p><p>たとえば、莫大なデータを検索窓でフィルタする機能があったとして、同じ文字列で何度検索しても回答は同じなのに <code>filter()</code> の処理が毎回走るのはパフォーマンス的に良くない。</p><h3 id="h3808afc098">✅ useMemoなら再計算(<code>filter()</code>)が発生しない</h3><pre><code class="language-javascript">const filteredItems = useMemo(() =&gt; {
  return items.filter(item =&gt; item.includes(value));
}, [items, value]);</code></pre><ul><li>入力する検索文字列（value）が変わったときだけ filter() が実行される</li><li>データ配列（items）が変わらなければ、同じ検索文字列で再レンダリングしても再計算されない</li><li>前回の結果（フィルタ済み配列）をそのまま再利用してくれる</li></ul><hr><h2 id="h556acfa4ac">⚡️useMemoとuseEffectとの違い</h2><p>同じように依存があるuseEffectと何が違うのか疑問に思った。useEffectの場合、検索文字列（value）を受け取るたびに filter() が実行されその値が返ってくる。<br></p><h3 id="h0932c09a8c">🟡 <code>useEffect</code> を使う場合：</h3><pre><code class="language-javascript">useEffect(() =&gt; {
  const result = items.filter(item =&gt; item.includes(value));
  setFilteredItems(result); // 再レンダリング後に毎回実行される
}, [items, value]);</code></pre><ul><li>検索文字列（value） が変わるたびに <code>filter()</code> 実行</li><li>計算 → <code>setState</code> → 再レンダリング の流れが毎回発生</li><li>React の再レンダリングのたびに副作用が発生して重くなる可能性あり</li></ul><p></p><h3 id="hbcc3118b66">🟢 <code>useMemo</code> を使う場合：</h3><pre><code class="language-javascript">const filteredItems = useMemo(() =&gt; {
  return items.filter(item =&gt; item.includes(value));
}, [items, value]);</code></pre><ul><li>items と value が同じなら、filter は再実行されない</li><li>単なる再レンダリングだけでは計算はスキップ</li><li>前回の結果（filteredItems）をそのまま再利用して描画できる</li></ul>

React基礎｜useMemoとは？使い方とuseEffectとの違いを解説

<h2 id="he6579bd843">useContextとは？</h2><p>useContext は &lt;Provider&gt; で囲まれた範囲内の子孫コンポーネントで、props を使わずに共有の値（状態・関数など）にアクセスするための機能。</p><h2 id="h0cec7e8b02">🧠 1. CountContext を定義（context/CountContext.jsx）</h2><pre><code class="language-javascript">import { createContext, useState } from &quot;react&quot;;

export const CountContext = createContext();

export function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  return (
    &lt;CountContext.Provider value={{ count, setCount }}&gt;
      {children}
    &lt;/CountContext.Provider&gt;
  );
}</code></pre><p><code>export const CountContext = createContext();</code>でコンテキストを定義する。</p><h3 id="he0a5e43311">⚠️exportの書きかたについて</h3><p><code>export const CountContext = createContext();</code>と<code>export function CounterProvider({ children })...</code>を二つ記述した場合、ESLintの警告が出る。</p><pre><code>Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.eslint(react-refresh/only-export-components)</code></pre><blockquote><p>「1つのファイル内でコンポーネント以外の export（たとえば Context など）も一緒に定義すると、ホットリロードがうまく動かないことがあるから、分けてね」という警告</p></blockquote><p>エクスポート方法をexport { CountContext, CounterProvider };という形にまとめると、警告はきえる。<br>これは一時的に警告が緩和しているだけで、根本的には「Context は非コンポーネントだから分けるべき」ということが推奨されている。</p><h2 id="haf8dbe9821">📺 2. 表示コンポーネント（components/Display.jsx）</h2><pre><code class="language-javascript">import { useContext } from &quot;react&quot;;
import { CountContext } from &quot;../context/CountContext&quot;;

export default function Display() {
  const { count } = useContext(CountContext);
  return &lt;p&gt;Count: {count}&lt;/p&gt;;
}</code></pre><h2 id="h11e211125c">➕ 3. 増加ボタンコンポーネント（components/Increment.jsx）</h2><pre><code class="language-javascript">import { useContext } from &quot;react&quot;;
import { CountContext } from &quot;../context/CountContext&quot;;

export default function Increment() {
  const { setCount } = useContext(CountContext);
  return &lt;button onClick={() =&gt; setCount(c =&gt; c + 1)}&gt;+1&lt;/button&gt;;
}</code></pre><h2 id="h0dfc87695b">🧩 4. アプリに組み込む（App.jsx）</h2><pre><code class="language-javascript">import Display from &quot;./components/Display&quot;;
import Increment from &quot;./components/Increment&quot;;
import { CounterProvider } from &quot;./context/CountContext&quot;;

function App() {
  return (
    &lt;CounterProvider&gt;
      &lt;h1&gt;カウンターアプリ&lt;/h1&gt;
      &lt;Display /&gt;
      &lt;Increment /&gt;
    &lt;/CounterProvider&gt;
  );
}

export default App;</code></pre><p><code> &lt;CounterProvider&gt;</code>で囲まれている子孫コンポーネント、<code>&lt;Display /&gt;</code>と<code>&lt;Increment /&gt;</code>コンポーネント内から <code>&lt;CounterProvider&gt;</code>の値にアクセスできる。</p><h2 id="h0a9aec76f8">✅ ポイント</h2><ul><li>CountContext は一度定義しておけば、どのファイルからでも import して useContext 可能。</li><li>CounterProvider で囲った範囲内であれば、子孫コンポーネント全てが値にアクセスできる。</li><li>状態管理が必要なアプリをシンプルに保つために、このパターンは非常に便利。</li></ul><p></p>

React基礎

React基礎｜useCallbackとは？なぜ使用するか解説

React基礎｜useMemoとは？使い方とuseEffectとの違いを解説

React基礎｜useContextとは？使い方を説明