Tech

【React超入門】初心者がまず覚えるべき2つのフック｜useStateとuseEffectを図解で解説

はじめに

Reactの基本を学ぼうとすると、必ず目にするのがuseStateとuseEffectという2つのフックです。

「なんだか難しそう…」と感じるかもしれませんが、実は使い方を覚えると、Reactの便利さを一気に体感できるようになります。

✅ この記事はReact入門者のためのガイドです。

※Reactって何？という方は、前回の記事「Reactの基本構文とコンポーネントを5分で理解する入門ガイド」を先に読むことをおすすめします。

この記事を読むことで以下のような疑問が解決できます：

  • useStateとuseEffectってなに？
  • どんな場面で使うの？
  • どうやって書けばいいの？

具体例と図解を交えながら、やさしく丁寧に解説していきます。

useState：状態(state)を持つ

そもそも「状態」って？

Reactでは、画面に表示される情報を「状態（state）」という形で管理します。状態とは、アプリ内で変わる可能性のある値のことです。

例えば、

  • カウンターアプリで現在のカウント数
  • 入力フォームで入力されたテキスト
  • チェックボックスのオン・オフ状態

これらはすべて「状態」です。

状態が変わると、Reactは自動的に画面を更新してくれます。

具体的なイメージ例

たとえば、お風呂の水温を手動で調整するシステムを想像してください。

現在の温度はディスプレイに表示されており、ボタンを押すと温度が変わります。

この「現在の温度」がstateで、ボタンを押した時の「温度の変更」がsetStateにあたります。

useStateの基本な書き方

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count = 状態, setCount = 状態を更新する関数

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

このコードでは、カウント数を状態として管理し、「増やす」ボタンを押すたびに状態が更新され、表示も自動で変わります。

useState(0)によって初期値0のcountという状態を作っています。そしてsetCountという関数を使って状態を変更します。

ここでいうsetCount(count + 1)の意味は、「今のcountに1を足した値を新しい状態にする」ということ。これによりReactが自動的に再描画を行い、画面が更新されます。

useEffect：コンポーネントが動いた後の操作

useEffectってなに？

useEffectは、画面が表示された時や、特定の値が変わった時に「何かを実行したい」ときに使います。

例えば、

  • コンポーネントが表示された直後にデータを読み込みたい
  • 特定の値が変わったらアニメーションを発動したい
  • 外部APIにデータを送信したい

これらの処理は、タイミングを明示的に管理する必要があります。そんなときにuseEffectを使います。

具体的なイメージ例

「目覚まし時計」をイメージしてください。朝起きたら音楽を再生したい。この「起きた瞬間に再生する」処理がuseEffectです。

条件（起床）が満たされたときに一度だけ行動（再生）する。

あるいは「温度が30℃を超えたらクーラーをつける」といった条件付き動作にも似ています。

基本的な書き方

import { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log('表示された！');
  }, []); // [] = 一度だけ実行（初回表示時）

  return <p>Hello React</p>;
}

このコードは、「初回レンダリング時にだけ実行したい処理」に使われます。

ここでは console.log('表示された！') が実行されます。

useStateと表示の更新

Reactでは、状態を更新すると自動的に画面も再描画されます。これを「再レンダリング」と呼びます。

以下のコードで確認しましょう

const [name, setName] = useState('React');

return (
  <div>
    <input value={name} onChange={(e) => setName(e.target.value)} />
    <p>こんにちは、{name}さん！</p>
  </div>
);

入力欄に文字を入力するたびに、表示が更新されます。これがuseStateによる再レンダリングです。

useEffectの使い分け

useEffectには使い分けのポイントがあります。

① 初回だけ実行したい

useEffect(() => {
  console.log('最初だけ表示！');
}, []); // [] を指定

② 特定の値が変わった時だけ実行したい

useEffect(() => {
  console.log('countが変わった！');
}, [count]); // countの変化を監視

依存配列（[]や[count]）によって、いつ処理を実行するかが制御できます。

useStateとuseEffectを組み合わせる例

Reactの実用的な場面では、useStateとuseEffectを組み合わせて使うことが多いです。

例：入力に応じて文字数を表示する

import { useState, useEffect } from 'react';

function TextLengthChecker() {
  const [text, setText] = useState(''); // 入力されたテキストを保持する状態
  const [length, setLength] = useState(0); // 文字数を保持する状態

  useEffect(() => {
    setLength(text.length); // 入力が変わるたびに文字数を更新
  }, [text]); // textが変わるたびに実行

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <p>文字数: {length}</p>
    </div>
  );
}
  • useState('')は、テキストの初期値として空文字を使っています。
  • setText(e.target.value)は、入力欄で打たれた値を取得してtextの状態に保存します。
  • text.lengthは、その文字列の長さを返すJavaScriptの関数です。

このように、入力に応じてリアルタイムに文字数を表示したいときなどに活用できます。

おわりに

Reactを学び始めたら、useStateとuseEffectは避けて通れません。

それぞれが何をしているのか、どんな場面で使えるのかを理解しておくと、他のReactの機能もどんどん使いこなせるようになります…!!

実際に簡単なコンポーネントを自作して、状態や効果の変化を試してみるのが一番の学びです！

Categories