メインコンテンツまでスキップ

React Hooksの基本

· 約2分

React HooksはReact 16.8で導入された機能で、関数コンポーネントでstate管理や副作用処理を行うことができます。
この記事では、最も重要なHooksについて解説します。

useState Hook​

useStateは状態管理のための基本的なHookです。

import React, { useState } from 'react';

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

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

基本的な使い方​

  1. useStateをインポート
  2. 初期値を指定して呼び出し
  3. 返された配列の1番目が現在の値、2番目が更新関数

useEffect Hook​

useEffectは副作用処理のためのHookです。

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Timer: {seconds}秒</div>;
}

依存配列の重要性​

  • 空配列 []: マウント時のみ実行
  • 値あり [value]: 指定した値が変更時に実行
  • 配列なし: 毎回実行

カスタムHooks​

独自のHookを作成することで、ロジックを再利用できます。

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

まとめ​

React Hooksは関数コンポーネントの機能を大幅に拡張し、コードの再利用性と可読性を向上させます。基本的なHooksをマスターして、効率的なReact開発を行いましょう。

コメント

コメントはまだありません