<h2 id="hcb80b4f661">useCallback とは何か？</h2>useCallback はパフォーマンス最適化のためのReactHookです。 特定の処理をメモ化して不要な再レンダリングを抑制します。 第一引数にメモ化する処理を、第二引数に依存配列を指定します。 <pre><code>useCallback(処理, 依存配列)</code></pre> <h2 id="h5de0ddf158">useCallback を使わない実装</h2>以下のような画面を作成してみました。 トップページに<code>Card</code>コンポーネントを使ってユーザー名情報と趣味の情報を表示しています。 また、その下にユーザー名情報と趣味情報をそれぞれ更新できるようにしています。 そして<code>Card</code>コンポーネント、<code>HobbyEdit</code>コンポーネント、<code>AuthorEdit</code>コンポーネントの描画時に<code>console.log</code>を仕込んでみました。 <code>src/TopPage.js</code><pre><code>import React, { useState } from "react";
import AuthorEdit from "./AuthorEdit";
import HobbyEdit from "./HobbyEdit";
import Card from "./Card";

const TopPage = () =&gt; {
 const [name, setName] = useState("yamada");
 const [hobby, setHobby] = useState("trip");
 const handleNameChange = (value) =&gt; {
 setName(value);
 };

 const handleHobbyChange = (value) =&gt; {
 setHobby(value);
 };

 return (
 &lt;div&gt;
 &lt;Card value={name} /&gt;
 &lt;AuthorEdit name={name} handleNameChange={handleNameChange} /&gt;

 &lt;Card value={hobby} /&gt;
 &lt;HobbyEdit hobby={hobby} handleHobbyChange={handleHobbyChange} /&gt;
 &lt;/div&gt;
 );
};

export default TopPage;</code></pre> <code>src/Card.js</code><pre><code>import React from "react";

function Card({ value }) {
 console.log("Card rendered", value);
 return (
 &lt;div&gt;
 &lt;p&gt;{value}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default Card;</code></pre> <code>src/AuthorEdit.js</code><pre><code>import React from "react";

function AuthorEdit({ handleNameChange, name }) {
 console.log("AuthorEdit rendered")
 return (
 &lt;div&gt;
 &lt;label htmlFor="name"&gt;名前: &lt;/label&gt;
 &lt;input
 id="name"
 type="text"
 value={name}
 onChange={(e) =&gt; handleNameChange(e.target.value)}
 /&gt;
 &lt;/div&gt;
 );
}

export default AuthorEdit;</code></pre> <code>src/HoddyEdit.js</code><pre><code>import React from "react";

function HobbyEdit({ hobby, handleHobbyChange }) {
 console.log("HobbyEdit rendered")
 return (
 &lt;div&gt;
 &lt;label htmlFor="hobby"&gt;趣味: &lt;/label&gt;
 &lt;input
 id="hobby"
 type="text"
 value={hobby}
 onChange={(e) =&gt; handleHobbyChange(e.target.value)}
 /&gt;
 &lt;/div&gt;
 );
}

export default HobbyEdit;</code></pre> <h2 id="h06d511b837">ログ出力結果からパフォーマンス改善を行う</h2>上記コードで、初回表示時のログは以下のようになりました。 全てのコンポーネントが描画されていることがわかります。<pre><code>Card rendered yamada
AuthorEdit rendered
Card rendered trip
HobbyEdit rendered</code></pre> しかし、ユーザー情報を更新した場合（"yamada" -&gt; "tanaka"）は以下のようにログ出力されてしまいます。<pre><code>Card rendered tanaka
AuthorEdit rendered
Card rendered trip
HobbyEdit rendered</code></pre> ユーザー情報のみを更新しただけなので、本来<code>Card</code>コンポーネント(Trip)と<code>HobbyEdit</code>コンポーネントは再レンダリングされるべきではありません。 これを改善するにはまず、各コンポーネントをメモ化します。 <code>src/Card.js</code><pre><code>export default React.memo(Card);</code></pre><code>src/HobbyEdit.js</code><pre><code>export default React.memo(HobbyEdit);</code></pre><code>src/AuthorEdit.js</code><pre><code>export default React.memo(AuthorEdit);</code></pre> その状態で再度ユーザー情報更新時のログ出力結果を見てみます。<pre><code>Card rendered tanaka
AuthorEdit rendered
HobbyEdit rendered</code></pre> <code>trip</code>の<code>Card</code>コンポーネントは再レンダリングされなくなったのですが、<code>HobbyEdit</code>コンポーネントはレンダリングされたままです。 これはユーザー名更新時に<code>TopPage</code>コンポーネントが更新され、そのときに<code>handleHobbyChange</code>コンポーネントも再度読み込まれているためです。 これを改善するには<code>useCallback</code>で<code>handleNameChange</code>、<code>handleHobbyChange</code>をラップして依存配列にそれぞれ、<code>name</code>, <code>hobby</code>を指定することで必要な時のみ再レンダリングされるようにすれば良いです。 <code>src/TopPage.js</code><pre><code> const handleNameChange = useCallback(
 (value) =&gt; {
 setName(value);
 },
 [name]
 );

 const handleHobbyChange = useCallback(
 (value) =&gt; {
 setHobby(value);
 },
 [hobby]
 );</code></pre> この状態でユーザー名を再度更新してみました（"yamada" =&gt; "yamada2"）。<pre><code>Card rendered yamada2
AuthorEdit rendered</code></pre> また、趣味情報も更新してみました（"trip" =&gt; "trip2"）。<pre><code>Card rendered trip2
HobbyEdit rendered</code></pre> 最終的なコードは以下の通りです。 <code>src/TopPage.js</code><pre><code>import React, { useCallback, useState } from "react";
import AuthorEdit from "./AuthorEdit";
import HobbyEdit from "./HobbyEdit";
import Card from "./Card";

const TopPage = () =&gt; {
 const [name, setName] = useState("yamada");
 const [hobby, setHobby] = useState("trip");
 const handleNameChange = useCallback(
 (value) =&gt; {
 setName(value);
 },
 [name]
 );

 const handleHobbyChange = useCallback(
 (value) =&gt; {
 setHobby(value);
 },
 [hobby]
 );

 return (
 &lt;div&gt;
 &lt;Card value={name} /&gt;
 &lt;AuthorEdit name={name} handleNameChange={handleNameChange} /&gt;


 &lt;Card value={hobby} /&gt;
 &lt;HobbyEdit hobby={hobby} handleHobbyChange={handleHobbyChange} /&gt;
 &lt;/div&gt;
 );
};

export default TopPage;</code></pre><code>src/Card.js</code><pre><code>import React from "react";

function Card({ value }) {
 console.log("Card rendered", value);
 return (
 &lt;div&gt;
 &lt;p&gt;{value}&lt;/p&gt;
 &lt;/div&gt;
 );
}

export default React.memo(Card);</code></pre><code>src/HobbyEdit.js</code><pre><code>import React from "react";

function HobbyEdit({ hobby, handleHobbyChange }) {
 console.log("HobbyEdit rendered")
 return (
 &lt;div&gt;
 &lt;label htmlFor="hobby"&gt;趣味: &lt;/label&gt;
 &lt;input
 id="hobby"
 type="text"
 value={hobby}
 onChange={(e) =&gt; handleHobbyChange(e.target.value)}
 /&gt;
 &lt;/div&gt;
 );
}

export default React.memo(HobbyEdit);</code></pre><code>src/AuthorEdit.js</code><pre><code>import React from "react";

function AuthorEdit({ handleNameChange, name }) {
 console.log("AuthorEdit rendered")
 return (
 &lt;div&gt;
 &lt;label htmlFor="name"&gt;名前: &lt;/label&gt;
 &lt;input
 id="name"
 type="text"
 value={name}
 onChange={(e) =&gt; handleNameChange(e.target.value)}
 /&gt;
 &lt;/div&gt;
 );
}

export default React.memo(AuthorEdit);</code></pre>

useCallbackについて知る

<h2 id="h4dd7aae9df">Context とは何か？</h2>状態を受け渡しするにはコンポーネント間で親コンポーネントから子コンポーネントへ props を用いて受け渡しを行うことができます。 しかしこうした状態のバケツリレーでは多くのコンポーネント間で状態の受け渡しが発生する場合に頓挫になってしまう場合があります。 Contextはある状態をいろんなコンポーネントから共有できるようにすることです。 Contextを用いることでpropsによる値のバケツリレーを使わずに、いろんなコンポーネントからアクセスできるグローバルな状態を定義することができます。 グローバルに定義する状態の例としては、認証情報やダーク、ライトといったテーマの情報などがあげられます。 <h2 id="h696bcf90b0">useContext とは何か？</h2>useContext は Context を使用するための ReactHooks です。 useContext を使うことでグローバルな状態を定義でき、いろんなコンポーネントからその状態にアクセスできるようになります。 <h2 id="hae854fe954">useContext を使う手順</h2>useContext を使うには下記の通りです。 ①React.createContext で Context を作成する ②ContextProvider の value に状態を設定して子コンポーネントを囲う ③子コンポーネントから useContext を使用して定義した状態にアクセスする <h2 id="hda49860a19">useContext を使った例</h2>useContext を使用してユーザー情報を更新するフォームを作成してみました。各ファイルの役割は以下の通りです。<ol><li>src/UserContextProvider.js -&gt; Contextを定義</li><li>src/App.js -&gt; UserContextProviderを呼び出して子コンポーネントを囲う</li><li>src/Profile.js -&gt; Contextからユーザー情報を取得したり、更新したりする</li></ol> <code>src/UserContextProvider.js</code><pre><code>import { useState, createContext } from "react";

export const UserContext = createContext();

function UserContextProvider({ children }) {
 const [currentUser, setCurrentUser] = useState({ name: "taro", age: 25 }); // 本当は認証などを行う
 return (
 &lt;UserContext.Provider value={{ currentUser, setCurrentUser }}&gt;
 {children}
 &lt;/UserContext.Provider&gt;
 );
}

export default UserContextProvider;</code></pre> <code>src/App.js</code><pre><code>import UserContextProvider from "./UserContextProvider";
import Profile from "./Profile";

function App() {
 return (
 &lt;UserContextProvider&gt;
 &lt;Profile /&gt;
 &lt;/UserContextProvider&gt;
 );
}

export default App;</code></pre> <code>src/Profile.js</code><pre><code>import React, { useContext, useState } from "react";
import { UserContext } from "./UserContextProvider";

function Profile() {
 const { currentUser, setCurrentUser } = useContext(UserContext);
 const [name, setName] = useState("");
 const [age, setAge] = useState();
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 setCurrentUser({
 name: name,
 age: age,
 });
 setName("");
 setAge();
 };
 return (
 &lt;div&gt;
 &lt;h2&gt;現在のユーザー&lt;/h2&gt;
 &lt;p&gt;名前：{currentUser.name}&lt;/p&gt;
 &lt;p&gt;年齢：{currentUser.age}&lt;/p&gt;
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;input
 type="text"
 placeholder="Name"
 name="name"
 onChange={(e) =&gt; setName(e.target.value)}
 /&gt;
 &lt;input
 type="number"
 placeholder="Age"
 name="age"
 onChange={(e) =&gt; setAge(e.target.value)}
 /&gt;
 &lt;button&gt;変更&lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}

export default Profile;</code></pre>

useContextについて知る

<h2 id="h7b9d38baa1">副作用とは何か？</h2>通常のプルグラム処理は引数を与えられて、返却値を返します。 例えば以下の<code>CaluculateTax</code>関数は価格を引数に設定すると、税額を返します。<code>CaluculateTax</code>関数は外部に何も影響を与えることはありません。<pre><code>function CalculateTax(price) {
 return price * 0.1
}</code></pre> 副作用とは関数の外に影響を与えてしまうことです。DOMを更新したり、APIを実行したり、<code>console.log</code>を出力したり、ファイルに出力したり、状態を更新したりする処理が該当します。 <h2 id="h418b11a4e0">クラスコンポーネントのライフサイクルメソッドとは何か？</h2>クラスコンポーネントでは①<code>componentDidMount</code>、②<code>componentDidUpdate</code>、③<code>componentWillUnmount</code>というライフサイクルメソッドがあります。 <code>componentDidMount</code>はコンポーネントが生成されるときに1回のみ実行される処理を記述します。（例えば初回のAPI実行でデータを取得する処理など） <code>componentDidUpdate</code>はコンポーネントが更新されるときに実行される処理を記述します。 <code>componentWillUnmount</code>はコンポーネントが破棄されるときに実行される処理を記述します。（例えばAPIの通信切断など） <h2 id="h4125cb9dcb">useEffect とは何か？</h2>useEffectは副作用を実行できる、クラスコンポーネントのライフサイクルメソッドに相当するReact hooksです。 useEffectの第一引数には実行する処理を、第二引数には依存配列を指定します。依存配列に特定の変数を指定した場合はその変数が更新された場合に実行され、空配列を指定した場合は初回のみ実行されます。<pre><code>useEffect(() =&gt; {
 // 実行する処理
}, 依存配列);</code></pre> <h2 id="h4921ba2e0e">クラスコンポーネントでの従来の実装</h2>まず、クラスコンポーネントでの実装を見てみます。 以下の例はクラスコンポーネントで<code>document.title</code>を副作用で変更している例です。<pre><code>import React, { Component } from "react";

class ClassComponentWithoutUseEffect extends Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0,
 };
 }

 componentDidMount() {
 document.title = `Current count is ${this.state.count} !`;
 }

 componentDidUpdate() {
 document.title = `Current count is ${this.state.count} !`;
 }

 render() {
 return (
 &lt;div&gt;
 &lt;p&gt;current count is {this.state.count}&lt;/p&gt;
 &lt;button onClick={() =&gt; this.setState({ count: this.state.count + 1 })}&gt;
 Count UP
 &lt;/button&gt;
 &lt;/div&gt;
 );
 }
}

export default ClassComponentWithoutUseEffect;</code></pre> <h2 id="h037e3ab21a">useEffectを使用しての実装</h2>上記処理を関数コンポーネントで書き換えた例です。クラスコンポーネントでの実装と比べてかなり行数が少なくなったことがわかると思います。<pre><code>import React, { Component, useEffect, useState } from "react";

function FuncComponentWithUseEffect() {
&nbsp; const [count, setCount] = useState(0);
&nbsp; useEffect(() =&gt; {
&nbsp; &nbsp; document.title = `Current count is ${count} !`;
&nbsp; }, [count]);

&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &lt;p&gt;current count is {count}&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Count UP&lt;/button&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
}

export default FuncComponentWithUseEffect;

</code></pre> <h2 id="ha89ed77228">useEffectでAPI実行を実装してみた</h2>useEffect内でAPI実行を行う処理を実装してみました。APIのリクエストパラメータとしてTodoのIDをテキストフィールドから設定します。エラー時、ローディング時には専用の表示に切り替わります。<pre><code>import React, { useEffect, useState } from "react";

function SearchTodo() {
 const [error, setError] = useState(null);
 const [todoId, setTodoId] = useState(1);
 const [todo, setTodo] = useState({});
 const [loading, setLoading] = useState(true);
 const fetchTodo = async () =&gt; {
 await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
 .then(res =&gt; res.json())
 .then(
 (result) =&gt; {
 setTodo(result);
 setLoading(false);
 },
 (error) =&gt; {
 setError(error.message);
 setLoading(false);
 }
 );
 };

 useEffect(() =&gt; {
 fetchTodo();
 }, [todoId]);

 return (
 &lt;div&gt;
 &lt;input
 type="text"
 value={todoId}
 onChange={(e) =&gt; setTodoId(e.target.value)}
 /&gt;
 {error ? (
 &lt;div style={{ color: "red" }}&gt;Error: {error}&lt;/div&gt;
 ) : loading ? (
 &lt;h1&gt;loading...&lt;/h1&gt;
 ) : (
 &lt;div&gt;{todo.title}&lt;/div&gt;
 )}
 &lt;/div&gt;
 );
}

export default SearchTodo;</code></pre>

useEffectについて知る

<h2 id="h8c81c46478">useStateとは何か？</h2>useState はReact hooks のひとつ。useStateを使うことで状態の管理ができるようになります。 useStateは第一引数には管理したい状態の初期値を設定します。 返却値としては、管理したい状態とその状態を変更するための関数の配列が返ります。分割代入で取得するのが一般的です。<pre><code>const [状態, 状態を変更する関数] = useState(初期値);
const [count, setCount] = useState(0);</code></pre> <h2 id="h1a2facf864">クラスコンポーネントにおける状態管理</h2>クラスコンポーネントでも状態管理をすることができます。 以下はクラスコンポーネントを使って状態管理する例です。<pre><code>import React from "react";

class SampleWithClassComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0,
 };
 }
 render() {
 return (
 &lt;div&gt;
 &lt;p&gt;current count is {this.state.count}&lt;/p&gt;
 &lt;button onClick={() =&gt; this.setState({ count: this.state.count + 1 })}&gt;
 {" "}
 +1{" "}
 &lt;/button&gt;
 &lt;button onClick={() =&gt; this.setState({ count: this.state.count - 1 })}&gt;
 {" "}
 -1{" "}
 &lt;/button&gt;
 &lt;/div&gt;
 );
 }
}

export default SampleWithClassComponent;</code></pre> <h2 id="h146e260859">useStateを使った状態管理</h2>上記処理を関数コンポーネントでuseStateを使用して書き換えてみます。 行数が少なく、すっきりすることがわかると思います。<pre><code>import React, { useState } from "react";

const SampleWithArrowComponent = () =&gt; {
 const [count, setCount] = useState(0);
 return (
 &lt;div&gt;
 &lt;p&gt;current count is {count}&lt;/p&gt;
 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;+1&lt;/button&gt;
 &lt;button onClick={() =&gt; setCount(count - 1)}&gt;
 -1
 &lt;/button&gt;
 &lt;/div&gt;
 );
};
export default SampleWithArrowComponent;</code></pre>

技術的なことや趣味、読んだ本についての感想などを投稿してきます。

React の記事

カテゴリー