React用語一覧と利用ガイド

React 用語一覧と利用ガイド

React をマスターし、コンポーネントベースのアプリケーション開発を効率的に行うための用語解説とガイドを提供します。
React の基本から高度な概念まで理解しましょう。

React フック

React フックは、関数コンポーネントで状態や副作用を扱うための特別な関数です。以下に主要な React フックを説明し、サンプルコードも提供します。

useState

useStateは、関数コンポーネントで状態を管理するための React フックです。状態の保持と更新が可能です。

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>
  );
}

useEffect

useEffectは、関数コンポーネント内で副作用を制御する React フックです。副作用は、DOM の変更や非同期処理など、関数外の影響を与える処理を指します。

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

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useRef

useRefは、関数コンポーネント内で DOM 要素や他の Ref オブジェクトにアクセスするために使用されます。

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

function FocusInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // ページがロードされたときに input 要素にフォーカスを当てる
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

useContext と createContext

useContextとcreateContextを組み合わせて、コンテキストを使用できます。これにより、親から Props 経由でデータを渡す必要がなくなります。

import React, { useContext, createContext } from 'react';

const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello from Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

useMemo と useCallback

useMemoは値のメモ化に使用され、useCallbackは再レンダリングを避けたいコンポーネントに関数を渡す際に利用します。

import React, { useState, useMemo, useCallback } from 'react';

function List({ items }) {
  const itemCount = useMemo(() => items.length, [items]);
  const handleClick = useCallback((item) => {
    // ハンドラーロジック
  }, []);

  return (
    <div>
      <p>Item Count: {itemCount}</p>
      {items.map((item) => (
        <button key={item.id} onClick={() => handleClick(item)}>
          {item.name}
        </button>
      ))}
    </div>
  );
}

Recoil

補足：Recoil は 2025年1月に Meta がリポジトリをアーカイブし、メンテナンスが終わっています。今なら Jotai や Zustand が一般的な選択肢です。

Recoil は React アプリケーション内での状態管理を簡略化します。以下に Recoil の主要なフックを説明し、サンプルコードを提供します。

useRecoilState

useRecoilStateは、useState のようにステートを扱います。ステートが更新されると、それを使用するコンポーネントは再レンダリングされます。

import { useRecoilState } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const [state, setState] = useRecoilState(myState);

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={() => setState(state + 1)}>Increment</button>
    </div>
  );
}

useRecoilValue

useRecoilValueは RecoilValue 型のデータを受け取り、ステートを利用します。ステートが更新されると、それを使用するコンポーネントは再レンダリングされます。

import { useRecoilValue } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const state = useRecoilValue(myState);

  return <p>State: {state}</p>;
}

useSetRecoilState

useSetRecoilStateは RecoilState 型のデータを受け取り、ステートのセッター関数を提供します。ステートが更新しても、使用するコンポーネントは再レンダリングされません。

import { useSetRecoilState } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const setState = useSetRecoilState(myState);

  return (
    <div>
      <button onClick={() => setState((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

Redux

Redux は強力なグローバルステート管理ツールですが、Recoil の利用を検討することをお勧めします。以下は Redux の主要な関数とサンプルコードです。

createSlice

createSliceを使用すると、Reducer を生成し、Action Type と Action Creator が自動生成されます。

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

configureStore

configureStoreを使用して、作成した Slice を 1 つのストアに結合できます。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

useSelector

useSelectorを使用して、ストアに保存されたステートデータから必要なデータを取得します。

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter);
  return <p>Count: {count}</p>;
}

useDispatch

useDispatchを使用して、ストアのデータを変更する関数を取得できます。

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function CounterButtons() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

React とそのエコシステムの用語を理解し、これらのフックとツールを活用して効果的なアプリケーションを開発してみて下さい。