<h2 id="h7a616d398c">useReducer とは何か？</h2>useState と同じで状態を管理するためのReactHooksです。 useReducer の第一引数には reducer 、第二引数には初期値を設定します。 返却値は現在の状態と状態を更新するための dispatch 関数の配列となります。 <pre><code>const [現在の状態, dispatch関数] = useReducer(reducer関数, 初期値);</code></pre> reducer 関数は第一引数は以前の状態、第二引数にオブジェクトが設定されます。 返却値としては新しい状態を返却します。 <pre><code>const reducer = (元の状態, action) =&gt; {
 switch (action.type) {
 case "increment":
 return {
 //新しい状態
 }
 case "decrement":
 return {
 //新しい状態
 }
 }
}</code></pre> reducerとは状態を更新するための処理のことをいいます。 また、dispatchとはユーザーの操作とReducerのアクションを紐づけるための関数のことをいいます。 <h2 id="h97e96cf711">useState との違い</h2>基本的に useState で実装できるものは useReducer でも実装できます。 useReducer の特徴としては、状態を更新するための複雑なロジックを実装しやすい点です。 なので、String や Number 型などPrimitiveな情報を管理するときは useState、Objectなど複雑な情報を管理する場合は useReducer を使用したほうが良いと思います。 <h2 id="h7b4dd41252">useReducer を使った実装</h2>useReducer を使ってMovie情報を表示、更新する処理を実装してみました。 <pre><code>import { useReducer } from "react";

function App() {
 const reducer = (prev, action) =&gt; {
 switch (action.type) {
 case "UPDATE_TEXT":
 return { ...prev, [action.field]: action.payload };
 case "UPDATE_CHECKBOX":
 const newIsPublished = !prev.isPublished;
 return { ...prev, [action.field]: newIsPublished };
 default:
 throw new Error("unknown type");
 }
 };
 const initialMovieInfo = {
 id: 1,
 title: "test movie title",
 isPublished: false,
 };
 const [movie, dispatch] = useReducer(reducer, initialMovieInfo);

 return (
 &lt;div&gt;
 &lt;h3&gt;id: {movie.id}&lt;/h3&gt;
 &lt;h3&gt;title: {movie.title}&lt;/h3&gt;
 &lt;h3&gt;isPublished: {movie.isPublished ? "公開" : "非公開"}&lt;/h3&gt;
 &lt;div&gt;
 &lt;label htmlFor="title"&gt;タイトル&lt;/label&gt;
 &lt;input
 id="title"
 type="text"
 value={movie.title}
 onChange={(e) =&gt;
 dispatch({
 type: "UPDATE_TEXT",
 field: "title",
 payload: e.target.value,
 })
 }
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="isPublished"&gt;公開状態:&lt;/label&gt;
 &lt;input
 id="isPublished"
 type="checkbox"
 checked={movie.isPublished}
 onChange={() =&gt;
 dispatch({
 type: "UPDATE_CHECKBOX",
 field: "isPublished",
 })
 }
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}

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

useReducerを知る

<h2 id="h6f445f5dfa">useMemo とは何か？</h2>useMemoは値をキャッシュするためのReactHooksです。 第一引数にキャッシュしたい値を計算する関数、第二引数に依存配列を指定します。 返却値としては、第一引数で指定した関数が返すキャッシュしたい値が返ります。 <pre><code>const キャッシュしたい値 = useMemo(キャッシュしたい値を計算する関数, 依存配列)</code></pre> 注意点としては第一引数の「キャッシュしたい値を計算する関数」は引数があってはなりません。 なので、引数ありの関数をキャッシュしたい場合は以下のようにアロー関数でラップするのも一つの手です。 <pre><code>const cachedTax = useMemo(() =&gt; {
 CaluculateTax(price)
}, [price])</code></pre>上記の場合、初回描画時に<code>CaluculateTax</code>関数が実行され、税額を計算します。 次回以降は初回に計算された<code>CaluculateTax</code>関数の結果の値を返し続けます。そして、<code>price</code>の値が変更されたときに再度<code>CaluculateTax</code>関数が実行され、その値がキャッシュされます。 <h2 id="ha33d471f29">useMemo の効果を実感する</h2>以下のようなコードを書きました。 トップページに現在のテーマとストーリーの情報を表示しました。 そして、テーマとストーリーのジャンルを変更するためのボタンも設置しました。 今回は人為的にストーリー情報のフィルター処理を遅くするために遅延処理を入れています。 src/TopPage.js<pre><code>import React, { useState } from "react";
import StoryList from "./StoryList";
import { fetchStoryList, filterStoryList } from "./fetchStoryList";

const stories = fetchStoryList();
const TopPage = () =&gt; {
 const [genre, setGenre] = useState("all");
 const [theme, setTheme] = useState("dark");
 return (
 &lt;div style={{ backgroundColor: theme === "dark" ? "#7d7d7d" : "#ffffff" }}&gt;
 &lt;p&gt;current theme is {theme}&lt;/p&gt;
 &lt;button onClick={() =&gt; setTheme("light")}&gt;light&lt;/button&gt;
 &lt;button onClick={() =&gt; setTheme("dark")}&gt;dark&lt;/button&gt;
 &lt;br /&gt;
 &lt;p&gt;current genre is {genre}&lt;/p&gt;
 &lt;button onClick={() =&gt; setGenre("all")}&gt;ALL&lt;/button&gt;
 &lt;button onClick={() =&gt; setGenre("adventure")}&gt;冒険&lt;/button&gt;
 &lt;button onClick={() =&gt; setGenre("suiri")}&gt;推理&lt;/button&gt;
 &lt;br /&gt;
 &lt;p&gt;StoryList&lt;/p&gt;
 &lt;StoryList
 stories={stories}
 filterStoryList={filterStoryList}
 genre={genre}
 /&gt;
 &lt;/div&gt;
 );
};

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

function StoryList({ stories, filterStoryList, genre }) {
 const filteredStories = filterStoryList(stories, genre);
 return (
 &lt;&gt;
 {filteredStories.map((story, i) =&gt; (
 &lt;div key={i} style={{ display: "flex" }}&gt;
 &lt;p style={{ marginRight: "10px" }}&gt;{story.id}&lt;/p&gt;
 &lt;p style={{ marginRight: "10px" }}&gt;{story.title}&lt;/p&gt;
 &lt;p&gt;{story.genre}&lt;/p&gt;
 &lt;/div&gt;
 ))}
 &lt;/&gt;
 );
}

export default StoryList;</code></pre> src/fetchStoryList.js<pre><code>export function fetchStoryList() {
 const storiyACount = 1080;
 const storiesA = [...Array(storiyACount)].map((_, number) =&gt; {
 return {
 id: number + 1,
 title: `ワンピース第${number + 1}話`,
 genre: "adventure",
 };
 });
 const storiesB = [...Array(102)].map((_, number) =&gt; {
 return {
 id: storiyACount + number + 1,
 title: `名探偵コナン第${number + 1}話`,
 genre: "suiri",
 };
 });
 return [...storiesA, ...storiesB];
}

export function filterStoryList(stories, genre) {
 sleep(2000);
 return stories.filter((story) =&gt; {
 if (genre === "all") {
 return true;
 } else if (genre === "adventure") {
 return story.genre === "adventure";
 } else if (genre === "suiri") {
 return story.genre === "suiri";
 }
 });
}

function sleep(waitMsec) {
 var startMsec = new Date();
 while (new Date() - startMsec &lt; waitMsec);
}</code></pre> ジャンル情報を変更したときには、ストーリー情報が反映されるまで数秒時間がかかります。 しかし、テーマ情報を更新した際にも同じように反映されるまで数秒時間がかかってしまっています。これはテーマ情報を更新する際にストーリー情報のフィルター処理まで再度計算されているためです。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FSJwfjvL4AMw%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DSJwfjvL4AMw&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FSJwfjvL4AMw%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> これを改善するためにはストーリー情報のフィルター結果をメモ化する必要があります。 src/StoryList.js<pre><code> const filteredStories = useMemo(
 () =&gt; filterStoryList(stories, genre),
 [stories, filterStoryList, genre]
 );</code></pre> このように修正することで、テーマ情報更新がすぐに反映されるようになりました。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FmlPSpWLIF9k%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DmlPSpWLIF9k&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FmlPSpWLIF9k%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="he68bc386d9">useCallback でも書けないのか？</h2>もちろんuseCallbackでも書けます。 useMemoは関数の計算結果をキャッシュするのに対して、useCallbackは関数が再評価することを抑止する、ということです。 なので上記コードの場合は<code>filterStoryList</code>関数を評価する<code>TopPage</code>コンポーネントにおいて、useCallbackで関数をラップする必要があります。 src/StoryList.js<pre><code>export default React.memo(StoryList);</code></pre>src/TopPage.js<pre><code> const cachedfilterStoryList = useCallback(
 (stories, genre) =&gt; filterStoryList(stories, genre),
 [stories, filterStoryList, genre]
 );</code></pre>

useMemoを理解する

<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>

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

最新記事 (2ページ目)

カテゴリー

TKA5