目次
Reactの基本的なHooks: コンポーネントの基礎
Reactは、基本的なHooksを提供しています。 これらのHooksは、Reactコンポーネントを構築するための基本的な要素となります。 これらを理解し使いこなすことで、Reactアプリケーションは、強力で柔軟性があり、保守が容易なものとなります。 Reactの基本的なHooksには、状態の管理に使われるuseState、副作用を扱うためのuseEffect、計算結果をキャッシュするためのuseMemoなどがあります。
それぞれのHookは、異なる役割を果たし、特定の問題を解決するのに役立ちます。
useEffect
useEffectは、コンポーネントのライフサイクルに関連した副作用を扱ううためのHookです。
ここでの「副作用」とは、コンポーネントの描画に影響を与える処理のことです。
例えば、APIからデータを取得する処理は、コンポーネントの描画に影響を与えるため、副作用と呼ばれます。
では、具体的な例を見てみましょう。
useEffect(() => {
fetch('https://api.example.com')
.then(response => response.json())
.then(data => setData(data));
}, []);useEffectを使用してAPIからデータを取得する副作用を作成しています。
第2引数の空配列により、この副作用はコンポーネントがマウントされた時に一度だけ実行されます。
このように、useEffectを使うことで、コンポーネントのライフサイクルに関連した副作用を扱うことができるようになります。
useState
useStateは、関数コンポーネント内で状態を持つことができるようにするHookです。
ここでの「状態」とは、コンポーネントの内部で変化する値のことです。
例えば、ボタンをクリックするたびにカウントアップするようなコンポーネントを考えてみましょう。
const [count, setCount] = useState(0);
// countの値を増やす関数
const increment = () => setCount(count + 1);
// setCountを使ってcountの値を更新する
<button onClick={increment}>+</button>useStateを使用して、初期値0のcountという状態を作成し、それを更新するためのsetCountという関数を取得しています。
このように、useStateを使うことで、関数コンポーネント内で状態を持つことができるようになります。
useContext
useContextは、ReactのContext APIを扱うためのHookです。
これを使うと、コンポーネントツリーを通じてデータを共有することができます。
具体的な例を見てみましょう。
import React, { useState, useContext } from 'react';
const UserContext = React.createContext();
function App() {
const [user, setUser] = useState(null);
return (
<UserContext.Provider value={{ user, setUser }}>
<div>
<Header />
<Main />
</div>
</UserContext.Provider>
);
}
function Header() {
const { user } = useContext(UserContext);
return (
<header>
<h1>{user.name}</h1>
</header>
);
}UserContextというContextを作成し、Appコンポーネントのuserという状態を共有しています。
これにより、Headerコンポーネントでuserを参照することができるようになります。
そして、Headerコンポーネントでは、useContextを使用してUserContextを参照しています。
このように、useContextを使うことで、コンポーネントツリーを通じてデータを共有することができます。
Props が多重構造になると複雑になってしまいますが、useContextを使うことで、コンポーネント間でデータを簡単に共有することができます。
useState は関数コンポーネント内で状態を持つことができるようにするHookですが、useContextは、コンポーネントツリーを通じてデータを共有することができるようにするHookです。
useMemo
useMemoは、計算結果をキャッシュするためのHookです。
これを使うと、コンポーネントの再レンダリング時に、計算コストの高い関数を実行する必要がなくなります。
const memoizedValue = useMemo(() => {
// 計算コストの高い関数
return computeExpensiveValue(a, b);
}, [a, b]);computeExpensiveValueという計算コストの高い関数を実行し、その結果をmemoizedValueという変数に格納しています。
第2引数の配列には、computeExpensiveValueの計算に使用する値を指定します。
このように、useMemoを使うことで、毎回計算コストの高い関数を実行する必要がなくなり、パフォーマンスを向上させることができます。
初心者のうちは、useMemoを使う機会は少ないかもしれませんが、パフォーマンスを向上させるためには重要なHookです。
useCallback
useCallbackは、関数をメモ化するためのHookです。
これを使うと、コンポーネントの再レンダリング時に、関数を再定義する必要がなくなります。
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);doSomethingという関数をメモ化し、memoizedCallbackという変数に格納しています。
第2引数の配列には、doSomethingの実行に使用する値を指定します。
このように、useCallbackを使うことで、毎回関数を再定義する必要がなくなり、パフォーマンスを向上させることができます。
useMemo と useCallback は、どちらも計算コストの高い関数を実行する際に使用しますが、useMemoは計算結果をキャッシュするためのHookで、useCallbackは関数をメモ化するためのHookです。
混同しやすいHookですが、それぞれの特徴を理解しておきましょう。
カスタムHooks
React Hooksの強力な機能の1つは、自分自身でHooksを作成し、再利用可能なロジックをカプセル化することができる点です。 これらのカスタムHooksは、useというプレフィクスで始まる関数として定義します。
function useCounter(initialCount = 0) {
const [count, setCount] = useState(initialCount);
const increment = () => setCount(count + 1);
return { count, increment };
}useCounterというカスタムHookを作成しています。
そして、このカスタムHookを使って、以下のようにコンポーネントを作成することができます。
function Counter() {
const { count, increment } = useCounter();
return (
<div>
<p>count: {count}</p>
<button onClick={increment}>increment</button>
</div>
);
}function useCounter(initialCount = 0) {
const [count, setCount] = useState(initialCount);
const increment = () => setCount(count + 1);
return { count, increment };
}
function useCounterWithAlert(initialCount = 0) {
const { count, increment } = useCounter(initialCount);
const incrementWithAlert = () => {
increment();
alert(`count: ${count}`);
};
return { count, incrementWithAlert };
}useCounterというカスタムHookを使って、useCounterWithAlertというカスタムHookを作成しています。
カスタムHookは初心者のうちはあまり使う機会はないかもしれませんが、コンポーネントのロジックを再利用するためには重要な機能です。
カスタムHookを使って、コンポーネントのロジックを再利用することを意識していきましょう。
まとめ
React Hooksは、Reactの機能を拡張するための機能です。 Hooksを使うことで、クラスコンポーネントを使わずに、関数コンポーネントで状態を持つことができるようになります。 また、Hooksを使うことで、関数コンポーネントでライフサイクルメソッドを使うことができるようになります。 Hooksは、useState、useEffect、useContext、useMemo、useCallbackなど、様々な種類があります。
初心者のうちは、useStateとuseEffectを使う機会が多いかもしれませんが、それ以外のHooksも理解しておきましょう。
コスパよく React を学習できる Udemy 講座人気ランキング
ちなみに姉妹サイトの Learning Next では、React を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。
「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？
▶️ UdemyでReactを学べる講座の人気ランキング – Learning Next
ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！
