◾️はじめに

https://dk521123.hatenablog.com/entry/2025/10/24/215404

で、useStateを扱ったが、
それ以外にもuseEffectとかuseRefって使うようになっていて、
それらを総称して、React Hooksというらしいので、
これを機に徐々にまとめていく

【０】React Hooks

* Hook（フック）は、React の機能の一部で
　状態管理（state）などのReactの機能を使うための、
　useで始まる特別なJavaScript関数

https://ja.react.dev/reference/react/hooks

【１】useState

* state 変数 を追加するための React フック

https://ja.react.dev/reference/react/useState

１）構文

stateの定義

// const [state, setState] = useState(initialState);
const [open, setOpen] = useState(false);

各パラメータ	説明	Memo
state	State変数を定義
setState	State変数を更新するための関数	setXxxxで定義するのが慣習
initialState	Stateの初期値

stateの定義

// Case1: 値をそのまま格納するやり方
setState(2);

// Case2: 更新前の値 prev を参照するやり方
setState((prev) => prev + 1);

２）例

import React, { useState } from 'react'

const App = () => {
  // ★ useStateを使うだけで、クラスを定義せずにcountを管理
  const [count, setCount] = useState(0)

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </>
  )
}

export default App

【２】useEffect

* レンダリングの後のイベントをハンドリングできる

https://ja.react.dev/reference/react/useEffect

役割

[1] コンポーネントのレンダリング後に処理を実行する
[2] コンポーネントがアンマウントされる際に実行する

１）構文

// useEffect(setup, dependencies?)
useEffect(() => {
  setErrorMessage(null); // const [errorMessage, setErrorMessage] = useState<string | null>(null);
}, [openDialog]);
// (1) [] の場合、最初の画面レンダリング時のみ、
// setErrorMessage(null);を実行
// (2) [openDialog] の場合、
// 最初の画面レンダリング時＋openDialog変更時、setErrorMessage(null);を実行

各パラメータ	説明	Memo
setup	ロジックが記述された関数	{ setErrorMessage(null); }が当たる
dependencies	[Optional] setup コード内で参照されるすべてのリアクティブな値のリスト	[openDialog]が当たる

【３】useRef

* レンダー時には不要な値を参照するための React フック
 => Dirtyチェックなどに使える

https://ja.react.dev/reference/react/useRef

１）構文

const demoRef = useRef(initialValue)

// demoRef.current で値を参照できる

２）使用上の注意

* レンダー中に ref.current の値を読み取ったり書き込んだりしない
 => レンダー中に書き込みたい場合、useStateを使うべき

【４】useCallback

* 再レンダー間で関数定義をキャッシュできるようにする React フック
 => RadioButtonで変更したら値を保存する処理で使用

https://ja.react.dev/reference/react/useCallback

１）構文

useCallback(fn, dependencies)

２）サンプル

  const handleRowLimitChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;

    setRowLimit(newValue);    
    SettingsManager.setRowLimit(Number(newValue));
  }, []);

【５】useMemo

* 関数の結果を保持するためのフック

https://ja.react.dev/reference/react/useMemo

１）構文

const cachedValue = useMemo(calculateValue, dependencies)

２）サンプル

https://dk521123.hatenablog.com/entry/2025/10/14/224514

  // true = ダークモード、false = ライトモード
  const [darkMode, setDarkMode] = React.useState(false);

  // MUI のテーマを作成
  const theme = React.useMemo(
    () =>
      createTheme({
        palette: {
          mode: darkMode ? 'dark' : 'light',
        },
      }),
    [darkMode]
  );

  return (
    <ThemeProvider theme={theme}>

ランキング参加中

プログラミング

プログラムの超個人的なメモ

Memo for Programming.

【React】React Hooks ～入門編～

◾️はじめに

目次

【０】React Hooks

【１】useState

１）構文

２）例

【２】useEffect

１）構文

【３】useRef

１）構文

２）使用上の注意

【４】useCallback

１）構文

２）サンプル

【５】useMemo

１）構文

２）サンプル

関連記事