useフックの使い方

React（Next.js）では、状態管理や副作用の処理を行う際に「フック（Hook）」という機能を使います。フックを使うことで、関数コンポーネント内でも状態管理やライフサイクル処理が簡潔に記述できます。

本記事では、特によく使う代表的なフック useState、useEffect、useCallback などについて、初心者向けに解説します。

useState：状態を管理する

1import { useState } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <P>カウント: {count}</P>
9      <button onClick={() => setCount(count + 1)}>+1</button>
10    </div>
11  );
12}
13

useEffect：副作用の処理

1import { useEffect, useState } from 'react';
2
3function Timer() {
4  const [seconds, setSeconds] = useState(0);
5
6  useEffect(() => {
7    const interval = setInterval(() => {
8      setSeconds((prev) => prev + 1);
9    }, 1000);
10
11    return () => clearInterval(interval);
12  }, []);
13
14  return <P>{seconds}秒経過</P>;
15}
16

useCallback：関数の再生成を防ぐ

1import { useCallback, useState } from 'react';
2
3function ButtonComponent({ onClick }) {
4  return <button onClick={onClick}>押す</button>;
5}
6
7function Parent() {
8  const [count, setCount] = useState(0);
9
10  const handleClick = useCallback(() => {
11    setCount((prev) => prev + 1);
12  }, []);
13
14  return <ButtonComponent onClick={handleClick} />;
15}
16

そのほかの便利なフック

useMemo：重い処理をメモ化する

1import { useMemo, useState } from 'react';
2
3function ExpensiveCalculation({ number }) {
4  const result = useMemo(() => {
5    console.log('計算中...');
6    return number * 2;
7  }, [number]);
8
9  return <P>結果: {result}</P>;
10}
11

useRef：再レンダリングしない値やDOMへの参照

1import { useRef, useEffect } from 'react';
2
3function InputFocus() {
4  const inputRef = useRef(null);
5
6  useEffect(() => {
7    inputRef.current?.focus();
8  }, []);
9
10  return <input ref={inputRef} type="text" placeholder="自動フォーカス" />;
11}
12

useContext：グローバルな状態を扱う

1import { createContext, useContext } from 'react';
2
3const UserContext = createContext('ゲスト');
4
5function Greeting() {
6  const user = useContext(UserContext);
7  return <P>こんにちは、{user}さん</P>;
8}
9
10function App() {
11  return (
12    <UserContext.Provider value="太郎">
13      <Greeting />
14    </UserContext.Provider>
15  );
16}
17

useReducer：複雑な状態管理

1import { useReducer } from 'react';
2
3function reducer(state, action) {
4  switch (action.type) {
5    case 'increment':
6      return { count: state.count + 1 };
7    default:
8      return state;
9  }
10}
11
12function Counter() {
13  const [state, dispatch] = useReducer(reducer, { count: 0 });
14
15  return (
16    <>
17      <P>Count: {state.count}</P>
18      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
19    </>
20  );
21}
22

useId：ユニークなIDを生成する

1import { useId } from 'react';
2
3function Form() {
4  const id = useId();
5
6  return (
7    <div>
8      <label htmlFor={id}>名前:</label>
9      <input id={id} type="text" />
10    </div>
11  );
12}
13

まとめ

React のフックは、状態の管理、副作用の処理、最適化、コンテキストの共有など、機能ごとに用途が明確に分かれています。

特に useState と useEffect は基本中の基本なので、まずはこれらをしっかりと理解し、必要に応じて他のフックも取り入れていきましょう。