Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ogison

Reactのhook一覧

Posted at

React の hook 一覧

  • useState
  • useReducer
  • useContext
  • useRef
  • useImperativeHandle
  • useEffect
  • useLayoutEffec
  • useInsertionEffectReact
  • useMemo
  • useCallback
  • useTransition
  • useDeferredValue
  • useDebugValue
  • useId
  • useSyncExternalStore
  • useActionState

state に関する hook

state：component 内で管理する動的に変化するデータ。

■ useState

単純な状態管理のための hook。

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

■ useReducer

複雑な状態管理のための hook。

function countReducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    default:
      return state;
  }
}

const [count, dispatch] = useReducer(countReducer, 0);

context に関する hook

context：component ツリー全体でデータを共有するための仕組み。

■ useContext

component 間でデータを共有するための hook で、props を使わずに状態や値を親子間で受け渡すことが可能です。

const UserContext = createContext();
const user = useContext(UserContext);

ref に関する hook

ref：DOM 要素やクラスコンポーネントに直接アクセスするための手段。
(フォーカスやテキストの選択、アニメーションなど)

■ useRef

DOM 要素や任意の値の参照を保持し、再レンダリングされても値を保持し続ける hook。

const inputRef = useRef(null);

return (
  <div>
    <input ref={inputRef} type="text" placeholder="Click the button to focus" />
    <button onClick={handleFocus}>Focus Input</button>
  </div>
);

■ useImperativeHandle

親コンポーネントが特定のメソッドやプロパティにアクセスできるように、カスタムの ref を定義する hook。

// 親コンポーネント
function ParentComponent() {
  const customInputRef = useRef();

  const handleFocus = () => {
    customInputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={customInputRef} />
      <button onClick={handleFocus}>Focus Custom Input</button>
    </div>
  );
}

// 子コンポーネント
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  // 親コンポーネントからアクセス
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return (
    <input ref={inputRef} type="text" placeholder="Focus me from parent" />
  );
});

effect に関する hook

effect: component の描画に影響しない外部処理や状態変更。

■ useEffect

レンダリング後に実行される副作用処理を定義する hook。

// countが変わるたびに実行され、ドキュメントタイトルを更新
useEffect(() => {
  document.title = `Count: ${count}`;
  console.log(`ドキュメントタイトルを「Count: ${count}」に更新しました`);
}, [count]);

■ useLayoutEffect

DOM が変更される前に実行される処理を定義する hook。

// textが変わるたびに実行され、textの内容に基づいて入力の幅を自動調整
useLayoutEffect(() => {
  if (inputRef.current) {
    inputRef.current.style.width = `${inputRef.current.scrollWidth}px`;
  }
}, [text]);

■ useInsertionEffect

CSS-in-JS のライブラリなどがスタイルを挿入するタイミングを制御するための hook。

// componentマウント時、<style>タグを作成し、スタイルを挿入
useInsertionEffect(() => {
  const style = document.createElement("style");
  style.innerHTML = `
      .dynamic-style {
        color: purple;
        font-size: 24px;
        font-weight: bold;
      }
    `;
  document.head.appendChild(style);

  // クリーンアップで<style>タグを削除
  return () => {
    document.head.removeChild(style);
  };
}, []);

performance に関する hook

キャッシュされた計算を再利用して、不要な作業をなくして performance を向上させる。

■ useMemo

計算コストの高い関数の結果をメモ化し、依存関係が変わらない限り再計算を避ける hook。

const expensiveCalculation = useMemo(() => {
  return number * 1000;
}, [number]);

■ useMemo

関数をメモ化し、依存関係が変わらない限り新しい関数が生成されるのを防ぐ hook。
関数が子 component に渡される時などに役立ちます。

const increment = useCallback(() => {
  setCount((prevCount) => prevCount + 1);
}, []);

■ useTransition

状態更新を低優先度に設定し、UI の応答性を保ちながら状態を遅延して更新するための hook。

// isPending : 状態が低優先度で更新中であるかどうかを示すフラグ
// startTransition : この関数で囲んだ状態更新が低優先度として実行される
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInput(e.target.value);

  // リストの更新を低優先度に設定
  startTransition(() => {
    const newList = Array.from(
      { length: 20000 },
      (_, index) => `${e.target.value} - Item ${index + 1}`
    );
    setList(newList);
  });
};

■ useDeferredValue

状態の値を遅延させ、UI の応答性を保ちながら状態更新のタイミングを調整する hook。

function List({ input }) {
  // value : 遅延させたい元の値
  // deferredValue : 元の値を遅延させたもの
  const deferredValue = useDeferredValue(value);
  const items = Array.from({ length: 20000 }, (_, index) => (
    <p key={index}>
      {deferredInput} - Item {index + 1}
    </p>
  ));

  return <div>{items}</div>;
}

その他の hook

こちらの hook は一般的には使用されない hook で特定のユースケースで使用されます。

■ useDebugValue

デバッグ用に使用する hook で、React DevTools で表示されるラベルを設定する。

const [isOnline, setIsOnline] = useState(null);
// デバッグ時、isOnlineの状態が一目で分かるようにする
useDebugValue(isOnline ? "オンライン" : "オフライン");

■ useId

各コンポーネントに一意の ID を生成し、アクセシビリティ属性やフォーム要素のラベル付けなどに使用する。

const id = useId();

return (
  <div>
    <label htmlFor={id}>Name:</label>
    <input id={id} type="text" />
  </div>
);

■ useSyncExternalStore

React コンポーネントが外部の状態管理ストア（Redux など）と同期できるようにするための hook。

const store = {
  state: 0,
  listeners: new Set(),

  subscribe(listener) {
    this.listeners.add(listener);
    return () => this.listeners.delete(listener);
  },

  setState(newState) {
    this.state = newState;
    this.listeners.forEach((listener) => listener());
  },

  getSnapshot() {
    return this.state;
  },
};

const count = useSyncExternalStore(
  store.subscribe.bind(store), // storeの更新を監視
  store.getSnapshot.bind(store) // 現在のstoreの状態を取得
);

■ useActionState

form の action の状態を管理する hook。

async function increment(previousState, formData) {
  return previousState + 1;
}

// state : 現在の値
// formAction : formのactionとして渡す関数(incrementを実行)
// 0が初期値
const [state, formAction] = useActionState(increment, 0);

return (
  <form>
    {state}
    <button formAction={formAction}>Increment</button>
  </form>
);
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?