React の useToggler フックをマスターする

はじめに

この実験では、React の useToggler フックの使い方を調べます。このフックは、2 つの状態の間で切り替えられるブール型の状態変数を作成するための、簡単で効率的な方法を提供します。この実験が終わるとき、React アプリケーションでこのフックを使ってコンポーネントの切り替え機能を作成する方法をより深く理解しているでしょう。

React useToggler フック

VM には既に index.html と script.js が用意されています。一般的には、script.js と style.css にのみコードを追加すればよいです。

2 つの状態の間で切り替えられるブール型の状態変数を作成するには、次の手順に従います。

useState() フックを使って value 状態変数とそのセッターを作成します。
value 状態変数の値を切り替える関数を作成し、useCallback() フックを使ってメモ化します。
value 状態変数とメモ化された切り替え関数を返します。

以下は実装例です。

const useToggler = (initialState) => {
  const [value, setValue] = React.useState(initialState);

  const toggleValue = React.useCallback(() => setValue((prev) => !prev), []);

  return [value, toggleValue];
};

その後、このフックをコンポーネントで次のように使うことができます。

const Switch = () => {
  const [val, toggleVal] = useToggler(false);
  return <button ? "ON" : "OFF"}</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<Switch />);

右下隅の「Go Live」をクリックして 8080 番ポートでウェブサービスを実行してください。その後、Web 8080 タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！React useToggler フックの実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。