<h2 id="h47d49b8226">パフォーマンス最適化</h2><p>React では不要なレンダリングを避けるために、React.memo, useMemo, useCallback が利用される。<br>本ページでは使用方法、タイミングを記載する。</p><h2 id="h4886ea6007">useCallback</h2><p>関数に対して使用。(処理をメモ化)<br>メモ化されたコールバック関数を返すフック。<br>第二引数に指定した依存配列に指定した値が変化した場合のみ、useCallbackの関数も変化する。<br>よって、不要に生成される関数インスタンスの作成を抑制し、再描画を減らすことにつながり、パフォーマンス向上が期待できる。<br>React.memo と併用することで、コンポーネントの不要な再レンダリングをスキップできる</p><pre><code>//[deps]は依存配列(コールバック関数が依存している要素が格納された配列)
useCallback(callbackFunction, [deps]);</code></pre><p>カスタムフック内の関数はuseCallbackをとにかく使え！的な意見もある。<br><a href="https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/" target="_blank" rel="noopener noreferrer">https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/</a></p><h2 id="h6ce25814b7">React.memo</h2><p>コンポーネントに対して使用。<br>コンポーネントが返した React 要素を記録し、再レンダーされそうになった時に<br>本当に再レンダーが必要かどうかをチェックして、必要な場合のみ再レンダーする。</p><ol><li>本当に再レンダーが必要かどうかをチェック</li><li>メモ化によりコンポーネントの再描画をスキップ</li><li>必要な場合のみ再レンダー</li></ol><pre><code>// メモ化したいコンポーネントをラップして使うことで、不要な再レンダリングを防ぐ。
const メモ化されたコンポーネント = React.memo(
  元のコンポーネント,
  (prevProps, nextProps) =&gt; {
    /* true or flase */
  }
);</code></pre><h2 id="h692f02ca4c">useMemo</h2><p>計算結果の値をメモ化</p><pre><code>// render時に毎回重い処理をするのを避けたいときとか。
// a, bの値の変更を検知して再計算する。
const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);</code></pre><p>サンプルコードはこちら<br><a href="https://github.com/w8f/react-training/blob/master/front/src/component/memorization/MemorizationSample.tsx" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/blob/master/front/src/component/memorization/MemorizationSample.tsx</a></p>

React Hooks早わかり(useMemo, useCallback, React.memo編)

<h2 id="h2174bc601f">useContext  概要</h2><p>何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある時に使用される。<br>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#usecontext" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usecontext</a><br>わかりやすかった記事<br><a href="https://reffect.co.jp/react/react-usecontext-understanding" target="_blank" rel="noopener noreferrer">https://reffect.co.jp/react/react-usecontext-understanding</a></p><h2 id="h04c5b004b1"><br>useContext を利用する利点</h2><ul><li>複数コンポーネントで同じステートを簡単に共有できる。</li><li>ステート、イベントハンドラを一元管理できる。</li><li>全てのコンポーネントを明示的に通すことなしに、コンポーネントツリーの深くまで値を渡せる。</li><li>アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ<ul><li>（例： ロケール設定、UI テーマなど）で使用するのがオススメ</li></ul></li></ul><p><br></p><pre><code>import { VFC, createContext, useContext, useState } from "react";

// Contextを作成する。
export const UserCountContext = createContext(
　　　　{} as {
　　　　　　　　count: number;
　　　　　　　　setCount: React.Dispatch&lt;React.SetStateAction&lt;number&gt;&gt;;
　　　　}
);

// UseContextSampleのStateを子のコンポーネントに渡す
export const UseContextSample: VFC = () =&gt; {
　　　　const [count, setCount] = useState(100);
　　　　const value = {
　　　　　　　　count,
　　　　　　　　setCount,
　　　　};

　　　　 return (
　　　　　　　　&lt;div style={{ textAlign: "center" }}&gt;
　　　　　　　　　　　　&lt;h1&gt;useContext sample&lt;/h1&gt;
　　　　　　　　　　　　{/* 値を渡したいコンポーネントをcontext.Providerで囲む */}
　　　　　　　　　　　　&lt;UserCountContext.Provider value={value}&gt;
　　　　　　　　　　　　　　　　&lt;ComponentA /&gt;
　　　　　　　　　　　　&lt;/UserCountContext.Provider&gt;
　　　　　　　　　　　　&lt;hr /&gt;
　　　　　　　　&lt;/div&gt;
　　　　　　　　);
};
	

const ComponentA: VFC = () =&gt; {
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component A&lt;/p&gt;
　　　　　　　　　　　　&lt;ComponentB /&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
	

const ComponentB: VFC = () =&gt; {
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component B&lt;/p&gt;
　　　　　　　　　　　　&lt;ComponentC /&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
	

const ComponentC: VFC = () =&gt; {
　　　　// useContextで値を受け取り、使用することができる。
　　　　const { count, setCount } = useContext(UserCountContext);
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component C&lt;/p&gt;
　　　　　　　　　　　　&lt;p&gt;{count}&lt;/p&gt;
　　　　　　　　　　　　&lt;button onClick={() =&gt; setCount((prev) =&gt; prev + 1)}&gt;+&lt;/button&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
export default UseContextSample;</code></pre>

React Hooks早わかり(useContext編)

<h2 id="hc7aa0a755c">useReducer 概要</h2><h3 id="h288d55bc15">useReducer 用例</h3><ol><li>useState の代替品。</li><li>(state, action) =&gt; newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch メソッドとペアにして返す。</li><li>複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合に有用。</li><li>複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化にもなる。</li></ol><p>ボタンクリックでcountステートをインクリメント、デクリメントするサンプルコード。<br><a href="https://github.com/w8f/react-training/blob/153eab2661d30bbeec13f0fb1d065d5aa4c26c0c/front/src/component/useReducer/UseReducerSample.tsx" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/blob/153eab2661d30bbeec13f0fb1d065d5aa4c26c0c/front/src/component/useReducer/UseReducerSample.tsx</a></p><pre><code>import { VFC, useReducer } from "react";
	

type State = {
　　count: number;
};
	

type ActionType = {
　　type: "increment" | "decrement";
};
	

const UseReducerSample: VFC = () =&gt; {
    const initialState = { count: 0 };

    // reducer関数を定義する。
    // actionごとにstateに対する処理を記載
    const reducer = (state: State, action: ActionType) =&gt; {
        switch (action.type) {
            case "increment":
                return { count: state.count + 1 };
            case "decrement":
                return { count: state.count - 1 };
            default:
                throw new Error();
        }
    };
	

    // useReducerを呼び出す。
    // 第一引数にreducer関数、第二引数に初期値のステートを指定する。
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        &lt;div style={{ textAlign: "center" }}&gt;
            &lt;p&gt;count: {state.count}&lt;/p&gt;
            &lt;button
                style={{ margin: 3 }}
                onClick={() =&gt; {
                    dispatch({ type: "increment" });
                }}
            &gt;
            +
            &lt;/button&gt;
            &lt;button
                style={{ margin: 3 }}
                onClick={() =&gt; {
                    dispatch({ type: "decrement" });
                }}
            &gt;
            -
            &lt;/button&gt;
        &lt;/div&gt;
    );
};
	
export default UseReducerSample;</code></pre>

React Hooks早わかり(useReducer編)

<h2 id="hcfa24b6357">useRef 概要</h2><p>useRefが使用されるのは主に2パターン</p><ol><li>DOM やコンポーネントにアクセスする手段として使うとき</li><li>インスタンス変数代わりに使う(⇔useState との違いは値を更新しても画面が再描画されない。)</li></ol><p>内部に保持している値だけを更新したい、かつコンポーネントの再レンダリングを行いたくない場合に使うと良さそう<br>2 の使用例）コンポーネントのマウント状態、特定の処理が何度呼び出されたか、送信前のログデータを保持しておく<br><br>サンプルコード抜粋</p><pre><code>&nbsp;// nullを指定することで、readonlyになる（=currentは書き換えられない）
&nbsp;const inputRef = useRef&lt;HTMLInputElement&gt;(null);
&nbsp;const numRef = useRef(0);
&nbsp;&nbsp;// 1. DOM やコンポーネントにアクセスする手段として使うとき
&nbsp;&nbsp;&lt;input ref={inputRef} type="text" /&gt;
&nbsp;&nbsp;&lt;button onClick={() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;// useRef とは、書き換え可能な値を
&nbsp;&nbsp;&nbsp;&nbsp;// .current プロパティ内に保持することができる「箱」のようなもの
&nbsp;&nbsp;&nbsp;&nbsp;inputRef.current &amp;&amp; inputRef.current.focus();
&nbsp;&nbsp;}}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;Focus on Input
&nbsp;&nbsp;&lt;/button&gt;

&nbsp;&nbsp;// 2. インスタンス変数代わりに使う
&nbsp;&nbsp;&lt;button onClick={() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;numRef.current++;
&nbsp;&nbsp;&nbsp;&nbsp;console.log(numRef.current);
&nbsp;&nbsp;}}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;click
&nbsp;&nbsp;&lt;/button&gt;</code></pre><p>全体のサンプルコードはこちら<br><a href="https://github.com/w8f/react-training/commit/aea73e55c0c7eda4bfce78971158d30b5fe8e6a1" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/commit/aea73e55c0c7eda4bfce78971158d30b5fe8e6a1</a><br></p><h2 id="h7ab9ceed78">useRef の返り値の型</h2><p>useRef の初期値によって、useRef の返り値の型が変わる <br><strong>RefObject</strong>と<strong>MutableRefObject</strong>のどちらか<br><a href="https://zenn.dev/berlysia/articles/624bc1aaffda58" target="_blank" rel="noopener noreferrer">https://zenn.dev/berlysia/articles/624bc1aaffda58</a></p>

React Hooks早わかり(useRef編)

<h2 id="h8968883ae4">useEffectとは</h2><p>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#useeffect" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#useeffect</a><br>useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。</p><pre><code>import { VFC, useState, useEffect } from "react";

export type Photo = {
  albumId: number;
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
};

export const fetchPhoto = async () =&gt; {
  const res = await fetch("https://jsonplaceholder.typicode.com/Photos");
  const photos = (await res.json()) as Photo[];
  return photos;
};

const UseEffectSample: VFC = () =&gt; {
  /** state */
  const [Photos, setPhotos] = useState&lt;Photo[]&gt;([]);

  /** effect */
  useEffect(() =&gt; {
    fetchPhoto().then((photos) =&gt; setPhotos(photos));
  }, []);

  return (
    // return jsx
  );</code></pre><p>useEffect の第 2 引数</p><ul><li>空の配列[] → Mount 時のみ第一引数の関数が実行される。（Vueで言うところのmounted）</li><li>[特定の値] → 特定の値の変化を検知した際に実行される。（Vueで言うところのwatch）</li></ul><p><br></p>

React Hooks早わかり(useEffect編)

<h2 id="hac2cddf5cf">useState概要</h2><p>ステートを管理するhooks<br>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#usestate" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usestate</a></p><h2 id="hf05cfa305a">基本形</h2><pre><code>import { VFC, useState } from "react";

type Todo = {
  text: string;
};

const UseStateSample: VFC = () =&gt; {
    // number
    const [count, setCount] = useState(0);
    // string
    const [text, setText] = useState("");
    // object[]
    const [todos, setTodos] = useState&lt;Todo[]&gt;([{ text: "Learn hooks" }]);	
}</code></pre><h2 id="hd3af19ac8f">Stateの更新</h2><pre><code>// number
&lt;button onClick={() =&gt; setCount((prevCount) =&gt; prevCount + 1)}&gt;click&lt;/button&gt;
// object[]
&lt;button onClick={() =&gt; { setTodos([...todos, { text: todo }])}}&gt;add Todo&lt;/button&gt;</code></pre><h2 id="h066189bb11">Stateの更新(オブジェクトのリスト)</h2><p>useStateの更新判定は値の同一性（<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is" target="_blank" rel="noopener noreferrer">Object.is()</a>）で比較される。<br>そのため、オブジェクトのプロパティの値をただ更新するだけでは変更は検知できない。<br>⇔オブジェクトをコピーした上で、変更をマージする必要がある。<br><br>※サンプルコード</p><pre><code>import { VFC, useState } from "react";

type Member = {
  　　id: number;
  　　name: string;
  　　age: number;
　　　　checked: boolean;
};

const UseStateSample: VFC&lt;Member[]&gt; = () =&gt; {
　　　　const [members, setMembers] = useState&lt;Member[]&gt;([]);
　　　　const update = (id: number) =&gt; {
      　　setMembers([
        　　　　...members.map((member) =&gt; (member.id === id ? update(member) : member)),
　　      ])
    }

  　　return (
　　　　　　　　// return jsx
　　　　)
};</code></pre><p><br>全体のサンプルコードは下記リンクを参照ください。<br><a href="https://github.com/w8f/react-training/commit/74bf3d5d904ece40d3a63fb8318005def94f36c9" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/commit/74bf3d5d904ece40d3a63fb8318005def94f36c9</a></p>

React の記事一覧