Frontend Academy · レッスン

useState Hook：状態と再レンダリング

useState を呼び出してコンポーネントにローカル状態を追加し、setter 関数で状態を更新し、React がいつ、なぜ再レンダリングするのかを理解します。

「useState Hook：状態と再レンダリング」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Stateとは

Stateは時間とともに変化するデータで、変化したときにUIを更新する必要があります。通常の変数とは異なり、stateの変更によってReactは新しい値でコンポーネントを再レンダリングします。

useStateの構文

useState(initialValue)は、現在の値とセッター関数からなるタプルを返します。すぐに分割代入してください。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // initial value: 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

TypeScript：useStateの型付け

TypeScriptは初期値から型を推論します。初期値が曖昧な場合（nullや空の配列）は、明示的な型パラメーターを追加してください。

const [count, setCount] = useState(0);           // inferred: number
const [name, setName]  = useState('');            // inferred: string
const [user, setUser]  = useState<User | null>(null); // explicit
const [items, setItems] = useState<string[]>([]); // explicit

Stateの変更による再レンダリング

セッター関数を呼び出すと、再レンダリングがスケジュールされます。Reactは新しいstateの値でコンポーネント関数をもう一度呼び出します。返されたJSXが、仮想DOM上で前回のレンダリング結果を置き換えます。

Stateの更新は非同期

Stateの更新はまとめて処理され、すぐにではなく次のレンダリングの前に適用されます。同じイベントハンドラー内で更新後のstateを読み取らないでください。新しい値は次のレンダリングまで利用できません。

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still 0 — update hasn't applied yet
}

関数形式による更新

新しいstateが以前のstateに依存する場合は、セッターの関数形式を使います。これにより、古いクロージャーに起因するバグを避けられます。

// Risky (stale closure in async callbacks):
setCount(count + 1);

// Safe (functional update):
setCount(prev => prev + 1);

// Important for buttons that fire rapidly:
function increment() {
  setCount(c => c + 1); // always uses the latest value
}

オブジェクトを使ったState

stateがオブジェクトの場合は、必ず新しいオブジェクトを作成し、既存のオブジェクトを変更しないでください。Reactは参照で比較するため、ミューテーションでは再レンダリングが発生しません。

const [user, setUser] = useState({ name: 'Alice', age: 30 });

// WRONG: mutates state — React won't re-render
user.age = 31;
setUser(user); // same reference!

// CORRECT: new object
setUser({ ...user, age: 31 });

複数のState変数

独立したstate変数には、useStateを複数回呼び出します。値が一緒に変化しない場合、大きな1つのstateオブジェクトにまとめるよりも明確です。

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(false);

遅延初期化

初期stateの計算にコストがかかる場合は、関数をuseStateに渡します。その関数は最初のレンダリング時にだけ実行され、再レンダリングのたびには実行されません。

// Runs getInitialState() on every render (bad if expensive):
const [state, setState] = useState(getInitialState());

// Lazy init: only runs once:
const [state, setState] = useState(() => getInitialState());

Stateを使わない場合

すべての変数をstateにする必要はありません。派生値（total = items.reduce(…)など）はstateに保存せず、レンダリング中に計算してください。propsから派生したstateは、通常、過度な設計の兆候です。

Stateのリフトアップ

2つの兄弟コンポーネントでstateを共有する必要がある場合は、共通の親コンポーネントへstateをリフトアップし、propsとして渡します。これは、contextやstoreを使う前の基本的なReactのstate管理パターンです。

クイックチェック

setCount(count + 1)ではなく関数形式のsetCount(prev => prev + 1)を使うべきなのはなぜですか。

復習：useState

useStateは[value, setter]を返します。初期値によって型が決まります（または明示的なジェネリックを使います）。セッターは再レンダリングを発生させます。新しいstateが古いstateに依存する場合は、関数形式の更新を使います。オブジェクトでは、常にスプレッドして新しいオブジェクトを作成し、決して変更しません。コストの高い計算には遅延初期化を使います。兄弟コンポーネント間でstateを共有する必要がある場合は、共通の親へリフトアップします。

よくある質問

「useState Hook：状態と再レンダリング」レッスンは無料ですか？

はい。「useState Hook：状態と再レンダリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「useState Hook：状態と再レンダリング」で何を学びますか？

useState を呼び出してコンポーネントにローカル状態を追加し、setter 関数で状態を更新し、React がいつ、なぜ再レンダリングするのかを理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「useState Hook：状態と再レンダリング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る