<h2 id="ha697d94822">引数の型指定</h2><p><br></p><pre><code>export const Practice1 = () =&gt; {
&nbsp;const calcTotalFee = (num: number) =&gt; {
&nbsp;&nbsp;const total = num * 1.1;
&nbsp;&nbsp;console.log(total);
&nbsp;};
&nbsp;const onClickPractice = () =&gt; calcTotalFee(1000); // 例：ここで文字列の1000を渡すとエラーになる

&nbsp;return (
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;練習問題：引数の型指定&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickPractice}&gt;練習問題1を実行&lt;/button&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
};</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>実行する前にエラーを検知できる。<br>関数内で受け取った引数の型によって引き起こされるバグを防げる。<br></p><h2 id="hff00557ee3">返却値の型指定</h2><p><br></p><pre><code>export const Practice2 = () =&gt; {
&nbsp;const getTotalFee = (num: number): number =&gt; {

&nbsp;&nbsp;const total = num * 1.1;
&nbsp;&nbsp;return total;
&nbsp;};
&nbsp;const onClickPractice = () =&gt; console.log(getTotalFee(1000));

&nbsp;return (
&nbsp;&nbsp;&lt;div&gt;
&nbsp;&nbsp;&nbsp;&lt;p&gt;練習問題：返却値の型指定&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickPractice}&gt;練習問題2を実行&lt;/button&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
};</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>返却値の型を指定すると、コードの可読性が向上する。<br>後に別の開発者によって関数の改修が行われた際に、指定した型以外の返却値を返すとエラーになるのでリグレッションを防ぎやすい。</p>

TypeScript チュートリアル【引数の型指定&返却値の型指定】

<h2 id="h0068efa9ac">カスタムフック</h2><p><br></p><h3 id="hbec6a76114">カスタムフックとは</h3><ul><li>ただの関数</li><li>hooksの各機能を使用できる</li><li>コンポーネントからロジックを分離していく考え方</li><li>メリットとして使い回しがきく、テストが容易、見通しが良くなる等がある</li><li>自由に作成できる。暗黙のルールでuse~という命名にする</li></ul><p><br></p><h4 id="hd65f06c6a0">./hooks/useAllUsers.ts</h4><pre><code>import axios from "axios";

import { useState } from "react";
import { UserProfile } from "../types/userProfile";
import { User } from "../types/api/user";

// 全ユーザー一覧を取得するカスタムフック
export const useAllUsers = () =&gt; {
&nbsp;const [userProfiles, setUserProfiles] = useState&lt;Array&lt;UserProfile&gt;&gt;([]);
&nbsp;const [loading, setLoading] = useState(false);
&nbsp;const [error, setError] = useState(false);

&nbsp;const getUsers = () =&gt; {
&nbsp;&nbsp;setLoading(true);
&nbsp;&nbsp;setError(false);

&nbsp;&nbsp;axios
&nbsp;&nbsp;&nbsp;.get&lt;Array&lt;User&gt;&gt;("https://jsonplaceholder.typicode.com/users")
&nbsp;&nbsp;&nbsp;.then((res) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const data = res.data.map((user) =&gt; ({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: user.id,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name: `${user.name}(${user.username})`,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;email: user.email,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;address: `${user.address.city}${user.address.suite}${user.address.street}`
&nbsp;&nbsp;&nbsp;&nbsp;}));
&nbsp;&nbsp;&nbsp;&nbsp;setUserProfiles(data);
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.catch((err) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setError(true);
&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;.finally(() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;setLoading(false);
&nbsp;&nbsp;&nbsp;});
&nbsp;};

&nbsp;// 他のコンポーネントでカスタムフックで定義したStateや関数が使用できるように、returnで返却する
&nbsp;return { getUsers, userProfiles, loading, error };
};</code></pre><p><br></p><h4 id="h958348edf0">./App.tsx</h4><pre><code>import "./styles.css";

import { UserCard } from "./components/UserCard";
import { useAllUsers } from "./hooks/useAllUsers";

export default function App() {
&nbsp;// カスタムフックを呼び出し、返却値を受け取る
&nbsp;const { getUsers, userProfiles, loading, error } = useAllUsers();
&nbsp;const onClickFetchUser = () =&gt; getUsers();

&nbsp;return (
&nbsp;&nbsp;&lt;div className="App"&gt;
&nbsp;&nbsp;&nbsp;&lt;button onClick={onClickFetchUser}&gt;データ取得&lt;/button&gt;
&nbsp;&nbsp;&nbsp;&lt;br /&gt;
&nbsp;&nbsp;&nbsp;{error ? (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p style={{ color: "red" }}&gt;データの取得に失敗しました&lt;/p&gt;
&nbsp;&nbsp;&nbsp;) : loading ? (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Loading...&lt;/p&gt;
&nbsp;&nbsp;&nbsp;) : (
&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{userProfiles.map((user) =&gt; (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;UserCard key={user.id} user={user} /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;))}
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;)}
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;);
}</code></pre><p><br></p><h3 id="ha214098e44">まとめ</h3><p>カスタムフックはhooksというディレクトリを切って管理していくのが一般的である。<br>他のコンポーネントでカスタムフックで定義したStateや関数が使用できるように、returnで返却する。<br>カスタムフックで呼び出したStateはそれぞれのコンポーネントで独立扱いなので、コンポーネント間でStateは競合しない。</p>

React チュートリアル【カスタムフック】

<h2 id="h97f1eb7137"><span style="color:#242424">コンポーネント分割（Atomic Design）</span></h2><h3 id="h1e9f1bc80c"><span style="color:#242424">Atomic Designとは</span></h3><ul><li><span style="color:#242424">画面要素を5段階に分け、組み合わせることでUIを実現</span></li><li><span style="color:#242424">コンポーネント化された要素が画面を構成しているという考え方</span></li><li><span style="color:#242424">React用ではなく、もともとはデザインの考え方</span></li><li><span style="color:#242424">モダンjavascript（コンポーネント）と相性が良い</span></li></ul><p><br><span style="color:#242424">■ATOMS：最小でそれ以上分解できない要素　</span><br><span style="color:#242424">例）ボタン/入力テキストボックス/アイコン 等 |</span><br><br><span style="color:#242424">■MOLECULES：Atomの組み合わせで意味を持つデザインパーツ　</span><br><span style="color:#242424">例）アイコン+メニュー名/プロフィール画像+テキストボックス/アイコンセット 等 |</span><br><br><span style="color:#242424">■ORGANISMS：AtomやMoleculeの組み合わせで構成される、単体である程度の意味を持つ要素群　</span><br><span style="color:#242424">例）入力エリア/サイドメニュー 等 |</span><br><br><span style="color:#242424">■TEMPLATES：ページのレイアウトのみを表現する要素（実際のデータは持たない）　</span><br><span style="color:#242424">例）ヘッダー、サイドメニュー、コンテンツエリア等のレイアウト情報　等 </span><br><br><span style="color:#242424">■PAGES：最終的に表示される1画面　</span><br><span style="color:#242424">例）ページ遷移毎に表示される各画面 |</span><br><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><br></p><h4 id="h5ae2ef9ec6"><strong style="color:#242424">あくまでベース</strong></h4><p><span style="color:#242424">Atomic Designはあくまで概念だと認識し、プロジェクトやチームに合わせてカスタマイズしていく。</span><br><span style="color:#242424">Atomic Designをすることが目的になってはいけない。</span><br><span style="color:#242424">プロジェクトの初期段階でチーム内で取り決めるのがベターである。</span><br><br></p><h4 id="hc921c5bcba"><strong style="color:#242424">はじめから無理して分けない</strong></h4><p><span style="color:#242424">慣れないうちに無理にコンポーネントに分けようとするとしんどい。</span><br><span style="color:#242424">まずは書いて定期的にリファクタリング（コンポーネント分割）する。</span><br><br></p><h4 id="h892bc51ab1"><strong style="color:#242424">要素の関心を意識</strong></h4><p><span style="color:#242424">「何に関心があるコンポーネントなのか」を意識しながら分割したり、Propsを定義したりする。</span></p>

React チュートリアル【コンポーネント分割（Atomic Design）】

<h2 id="h1560e3c524"><span style="color:#242424">ルーティング（React Router）</span></h2><p><br></p><h3 id="h910400ddb4"><span style="color:#242424">./App.jsx</span></h3><pre><code>import { BrowserRouter, Link } from "react-router-dom";

import { Router } from "./router/Router";

import "./styles.css";

export default function App() {
  return (

    &lt;!-- BrowserRouterコンポーネントで囲った範囲でルーティングが有効になる --&gt;
    &lt;BrowserRouter&gt;
      &lt;div className="App"&gt;
        &lt;!-- Linkコンポーネント（HTMLでいうaタグの役割）を使用することで簡単にページ遷移の処理を行うことができる Propsのtoに遷移したいURLのパスを指定する--&gt;
        &lt;Link to="/"&gt;Home&lt;/Link&gt;
        &lt;br /&gt;
        &lt;Link to="/page1"&gt;Page1&lt;/Link&gt;
        &lt;br /&gt;
        &lt;Link to="/page2"&gt;Page2&lt;/Link&gt;
      &lt;/div&gt;
      &lt;Router /&gt;
    &lt;/BrowserRouter&gt;
  );
}</code></pre><p><br></p><h3 id="h9e02f76acd"><span style="color:#242424">./router/Router.jsx</span></h3><pre><code>import { Switch, Route } from "react-router-dom";

import { Home } from "../Home";
import { Page404 } from "../Page404";
import { Page1Routes } from "./Page1Routes";
import { Page2Routes } from "./Page2Routes";

export const Router = () =&gt; {
  return (
    &lt;!-- パス毎に呼び出すコンポーネントを出し分ける場合はSwitchコンポーネントで囲った中でRouteコンポーネントを使用する --&gt;
    &lt;Switch&gt;
      &lt;!-- Propsにexcatを渡すことで、pathに完全一致したものを対象にすることができる --&gt;
      &lt;Route exact path="/"&gt;
        &lt;Home /&gt;
      &lt;/Route&gt;
      &lt;Route
        path="/page1"
        &lt;!--RouteコンポーネントにPropsにrenderを渡すことができる。renderにアロー関数を設定し、その中でコンポーネントを返却するとレンダリングするコンポーネントを指定することができる --&gt;
        &lt;!-- renderはデフォルトでPropsを受け取っている。その中身はルーティングに関する情報を持ったオブジェクトである。プロパティとしてhistory/location/matchのオブジェクトとstaticContextを持っている。例えば、renderオブジェクトの中のmatchオブジェクトのurlプロパティを参照するとURLの相対パスを受け取ることができる --&gt;
        render={({ match: { url } }) =&gt; (

          &lt;!-- Switchは入れ子にできる。この場合、子のRouteコンポーネントpathを親のRouteコンポーネントに指定したpathをルートとした記述とすることができる。 --&gt;
          &lt;Switch&gt;
            &lt;!-- 別ファイルに配列として切り出したパス設定を呼び出してループしてルーティングする事もできる --&gt;
            {Page1Routes.map((route) =&gt; (
              &lt;Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              &gt;
                {route.children}
              &lt;/Route&gt;
            ))}
          &lt;/Switch&gt;
        )}
      /&gt;
      &lt;Route
        path="/page2"
        render={({ match: { url } }) =&gt; (
          &lt;Switch&gt;
            {Page2Routes.map((route) =&gt; (
              &lt;Route
                key={route.path}
                exact={route.exact}
                path={`${url}${route.path}`}
              &gt;
                {route.children}
              &lt;/Route&gt;
            ))}
          &lt;/Switch&gt;
        )}
      /&gt;
      &lt;!-- 最後にRouteのpath="*"を指定することでどれにも一致しなかった場合のルーティングを設定できる --&gt;
      &lt;Route path="*"&gt;
        &lt;Page404 /&gt;
      &lt;/Route&gt;
    &lt;/Switch&gt;
  );
};</code></pre><p><br></p><h3 id="h3b2d747f6a"><span style="color:#242424">./router/Page1Routes</span></h3><pre><code>import { Page1 } from "../Page1";

import { Page1DetailA } from "../Page1DetailA";
import { Page1DetailB } from "../Page1DetailB";

export const Page1Routes = [
  {
    path: "/",
    exact: true,
    children: &lt;Page1 /&gt;
  },
  {
    path: "/detailA",
    exact: false,
    children: &lt;Page1DetailA /&gt;
  },
  {
    path: "/detailB",
    exact: false,
    children: &lt;Page1DetailB /&gt;
  }
];</code></pre><p><br></p><h3 id="h46f03b629b"><span style="color:#242424">./router/Page2Routes</span></h3><pre><code>import { Page2 } from "../Page2";

import { UrlParameter } from "../UrlParameter";

export const Page2Routes = [
  {
    path: "/",
    exact: true,
    children: &lt;Page2 /&gt;
  },
  {
    path: "/:id", &lt;!-- :の後にURLパラメータ名を指定できる --&gt;
    exact: false,
    children: &lt;UrlParameter /&gt;
  }
];</code></pre><p><br></p><h3 id="h291852eed6"><span style="color:#242424">./UrlParameter.jsx</span></h3><pre><code>import { useParams, useLocation } from "react-router-dom";

export const UrlParameter = () =&gt; {

  // useParamsというHooksを使用することで、URLパラメーターを受け取ることができる
  const { id } = useParams();

  // useLocationというHooksを使用することで、searchとしてURLクエリパラメーターを受け取ることができる
  const { search } = useLocation();
  // javascript標準のURLSearchParams関数に引数としてsearchを渡すことでURLクエリパラメーターを便利に扱える
  const query = new URLSearchParams(search);

  return (
    &lt;div&gt;
      &lt;h1&gt;UrlParameterページです&lt;/h1&gt;
      &lt;p&gt;パラメーターは {id} です&lt;/p&gt;
      &lt;p&gt;クエリパラメーターは {query.get("name")} です&lt;/p&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="h934ef95612"><span style="color:#242424">./Page2.jsx</span></h3><pre><code>import { Link } from "react-router-dom";

export const Page2 = () =&gt; {
  return (
    &lt;div&gt;
      &lt;h1&gt;Page2ページです&lt;/h1&gt;
      &lt;Link to="/page2/999"&gt;URL Parameter&lt;/Link&gt;
      &lt;br /&gt;
      &lt;Link to="/page2/999?name=hogehoge"&gt;Query Parameter&lt;/Link&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="h878c2cfcf1"><span style="color:#242424">./Page1.jsx</span></h3><pre><code>import { Link, useHistory } from "react-router-dom";

export const Page1 = () =&gt; {
  const arr = [...Array(100).keys()];
  // useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる
  const history = useHistory();
  // history.pushを使用することで引数に指定したpathに遷移させることができる
  const onClickDetailA = () =&gt; history.push("/page1/detailA");

  return (
    &lt;div&gt;
      &lt;h1&gt;Page1ページです&lt;/h1&gt;
      &lt;!-- Linkコンポーネントのtoの中はオブジェクトを渡すこともできる。--&gt;
      &lt;Link to={{ pathname: "/page1/detailA", state: arr }}&gt;DetailA&lt;/Link&gt;
      &lt;br /&gt;
      &lt;Link to="/page1/detailB"&gt;DetailB&lt;/Link&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickDetailA}&gt;DetailA&lt;/button&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="ha0f49f6af6"><span style="color:#242424">./Page1DetailA.jsx</span></h3><pre><code>import { useLocation, useHistory } from "react-router-dom";

export const Page1DetailA = () =&gt; {
  // useLocationでstateとして任意の変数を受けることもできる
  const { state } = useLocation();
  // useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる
  const history = useHistory();
  // history.goBackを使用することで前画面に遷移させることができる（ブラウザのバックボタンを同様の挙動）
  const onClickBack = () =&gt; history.goBack();
  console.log(state);

  return (
    &lt;div&gt;
      &lt;h1&gt;Page1DetailAページです&lt;/h1&gt;
      &lt;button onClick={onClickBack}&gt;戻る&lt;/button&gt;
    &lt;/div&gt;
  );
};</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">BrowserRouterコンポーネントで囲った範囲でルーティングが有効になる。</span><br><span style="color:#242424">パス毎に呼び出すコンポーネントを出し分ける場合はSwitchコンポーネントで囲った中でRouteコンポーネントを使用する。</span><br><span style="color:#242424">RouteコンポーネントのPropsにexcatを渡すことで、pathに完全一致したものを対象にすることができる。</span><br><span style="color:#242424">RouteコンポーネントにPropsにrenderを渡すことができる。renderにアロー関数を設定し、その中でコンポーネントを返却するとレンダリングするコンポーネントを指定することができる。</span><br><span style="color:#242424">renderはデフォルトでPropsを受け取っている。その中身はルーティングに関する情報を持ったオブジェクトである。プロパティとしてhistory/location/matchのオブジェクトとstaticContextを持っている。例えば、renderオブジェクトの中のmatchオブジェクトのurlプロパティを参照するとURLの相対パスを受け取ることができる。</span><br><span style="color:#242424">Switchは入れ子にできる。この場合、子のRouteコンポーネントpathを親のRouteコンポーネントに指定したpathをルートとした記述とすることができる。</span><br><span style="color:#242424">別ファイルに配列として切り出したパス設定を呼び出してループしてルーティングする事もできる。</span><br><span style="color:#242424">useParamsというHooksを使用することで、URLパラメーターを受け取ることができる。</span><br><span style="color:#242424">useLocationというHooksを使用することで、searchとしてURLクエリパラメーターを受け取ることができる。</span><br><span style="color:#242424">useHistoryというHooksを使用することで、javascriptを使用しての画面遷移を簡単に扱うことができる。</span></p>

React チュートリアル【ルーティング（React Router）】

<h2 id="hd3594f109c"><span style="color:#242424">レンダリングの最適化（memo/useCallBack/useMemo）</span></h2><h3 id="h59b94e0cf0"><span style="color:#242424">memo</span></h3><p><span style="color:#242424">./ChildArea.jsx</span><br></p><pre><code>import { memo } from "react";

const style = {
  width: "100%",
  height: "200px",
  backgroundColor: "khaki"
};
// memo()でコンポーネント自体（アロー関数）を囲うことで、propsが変更されない限り再レンダリングさせないことができる
export const ChildArea = memo((props) =&gt; {
  const { open, onClickClose } = props;
  const data = [...Array(2000).keys()];
  // 2000件の配列をループで回してコンソールログを出力する（ChildAreaコンポーネントのレンダリングの度に走る重い処理）
  data.forEach(() =&gt; {
    console.log("...");
  });
  console.log("ChildAreaがレンダリングされた！");

  return (
    &lt;&gt;
      {open ? (
        &lt;div style={style}&gt;
          &lt;p&gt;子コンポーネント&lt;/p&gt;
          &lt;button onClick={onClickClose}&gt;閉じる&lt;/button&gt;
        &lt;/div&gt;
      ) : null}
    &lt;/&gt;
  );
});</code></pre><p><br></p><h3 id="h9204a37fb9"><span style="color:#242424">useCallBack</span></h3><p><br></p><pre><code>import { useState, useCallback, useMemo } from "react";

import { ChildArea } from "../ChildArea";
import "./styles.css";

export default function App() {
  console.log("App");
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);
  const onChangeText = (e) =&gt; setText(e.target.value);
  const onClickOpen = () =&gt; setOpen(!open);

  /** 関数の処理が変わらない場合は、同じものを使い回させたいのでuseCallBackで囲ってあげる
   *  useCallBackは第一引数に関数、第二引数に依存配列を受け取る
   *  第二引数に空配列を指定すると、初回レンダリングに生成された関数を使い回す
   *  第二引数に変数を指定すると、その変数に変更があった場合のみ関数を再生成する
   */
  const onClickClose = useCallback(() =&gt; setOpen(false), [setOpen]);
  const temp = useMemo(() =&gt; 1 + 3, []);
  console.log(temp);

  return (
    &lt;div className="App"&gt;
      &lt;input value={text} onChange={onChangeText} /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickOpen}&gt;表示&lt;/button&gt;
      // &lt;子コンポーネントのPropsにアロー関数を渡す時、子コンポーネント側で毎回新しい関数を生成していると判断される（関数を普通に渡すだけだと、子コンポーネントをmemo化していてもPropsが変更されたと判断されるので子コンポーネントの再レンダリングが走ってしまう）
      &lt;ChildArea open={open} onClickClose={onClickClose} /&gt;
    &lt;/div&gt;
  );
}</code></pre><p><br></p><h3 id="h692f02ca4c"><span style="color:#242424">useMemo</span></h3><p><br></p><pre><code>import { useState, useCallback, useMemo } from "react";
import { ChildArea } from "../ChildArea";

import "./styles.css";

export default function App() {
  console.log("App");
  const [text, setText] = useState("");
  const [open, setOpen] = useState(false);
  const onChangeText = (e) =&gt; setText(e.target.value);
  const onClickOpen = () =&gt; setOpen(!open);
  const onClickClose = useCallback(() =&gt; setOpen(false), [setOpen]);
  /** 変数自体のメモ化をuseMemoで行うことができる
   *  useMemoは第一引数に関数、第二引数に依存配列を受け取る
   *  第二引数に空配列を指定すると、初回レンダリングに生成された変数を使い回す
   *  第二引数に変数を指定すると、その変数に変更があった場合のみ変数を再生成する
   */
  const temp = useMemo(() =&gt; 1 + 3, []);
  console.log(temp);

  return (
    &lt;div className="App"&gt;
      &lt;input value={text} onChange={onChangeText} /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;button onClick={onClickOpen}&gt;表示&lt;/button&gt;
      &lt;ChildArea open={open} onClickClose={onClickClose} /&gt;
    &lt;/div&gt;
  );
}</code></pre><p><br></p><h3 id="ha214098e44"><span style="color:#242424">まとめ</span></h3><p><span style="color:#242424">基本的に、複数の要素から成り立っているコンポーネントや、今後肥大化が予想されるコンポーネントはmemo()で囲ってあげる。</span><br><span style="color:#242424">関数の処理が変わらない場合は、同じものを使い回させたいので関数全体をuseCallBackで囲ってあげる。</span><br><span style="color:#242424">Propsに関数を受け取るコンポーネントの再レンダリングを最適化する場合は、コンポーネントのmemo化と関数定義にuseCallBackを設定することをセットとする。</span><br><span style="color:#242424">変数自体のメモ化をuseMemoで行うことができる。</span><br><span style="color:#242424">そこまで使う機会はないが、変数に設定する中の処理が複雑になっている時などのケースでは有効である。</span></p>

記事一覧