確認環境
react 18.2.0
react-dom 18.2.0
react-scripts 4.0.0StrictMode をオフにして検証します。
サンプルで実装するもの
+ボタン /-ボタンの押した回数を表示する- リセットボタンで押した回数を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>
</>
);
};