カスタムフックを使ってみる (React)

October 31, 2022

確認環境

react 18.2.0
react-dom 18.2.0
react-scripts 4.0.0

StrictMode をオフにして検証します。

サンプルで実装するもの

  • + ボタン / - ボタンの押した回数を表示する
  • リセットボタンで押した回数を0にする

カスタムフックを使わずに実装

src/App.js

import { useState } from "react";
import "./styles.css";

export default function App() {
  return (
    <>
      <Hoge />
    </>
  );
}

const Hoge = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const increment = () => {
    setCount1((prev) => prev + 1);
  };
  const decrement = () => {
    setCount2((prev) => prev - 1);
  };
  const reset = () => {
    setCount1(0);
    setCount2(0);
  };
  return (
    <>
      <p>+を押した回数: {count1}</p>
      <p>-を押した回数: {count2}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>リセット</button>
    </>
  );
};

カスタムフックを使って実装

カスタムフックは、フックを使った処理をまとめるもの。

src/useCounter.js

import { useState } from "react";

const useCounter = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const increment = () => {
    setCount1((prev) => prev + 1);
  };
  const decrement = () => {
    setCount2((prev) => prev - 1);
  };
  const reset = () => {
    setCount1(0);
    setCount2(0);
  };

  return {
    count1,
    count2,
    reset,
    increment,
    decrement
  };
};
export default useCounter;

src/App.js

import { useState } from "react";
import "./styles.css";
import useCounter from "./useCounter";

export default function App() {
  return (
    <>
      <Hoge />
    </>
  );
}

const Hoge = () => {
  const { count1, count2, increment, decrement, reset } = useCounter();
  return (
    <>
      <p>+を押した回数: {count1}</p>
      <p>-を押した回数: {count2}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>リセット</button>
    </>
  );
};

参考


SHARE

Profile picture

Written by tamesuu