【React練習問題】（回答）①カウントアップ、ダウンをつくろう

課題の目的

以下の基礎的な使い方を理解してもらいたかった。
・useStateの使い方
・useCallbackの使い方
・memoの使い方
・コンポーネントに分けること

この書き方に慣れてくれることで、まずはreactのソースが少しずつ理解出来てくる。
useCallbackの機能自体はあまり活用出来ていないが、使って子のコンポーネントに渡すことが基礎であることも知ってほしかった。

回答

実装方法はそれぞれ違うと思うので、一つの例だと思って見てほしいです。

import React, { useState, useCallback, memo} from "react";
import ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  const countUp = useCallback(() => setCount(count + 1), [count]);
  const countDown = useCallback(() => {
    if(count > 0) {
      setCount(count - 1);
    }
  }, [count]);
  
  return (
    <div>
      {count}
      <CountButton onClick={countUp} label="UP!!" />
      <CountButton onClick={countDown} label="DOWN!!" />
    </div>
  );
}

const CountButton = memo(({onClick, label}) => 
  <button onClick={onClick}>{label}</button>
)

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

仕様の実装

・useStateの利用

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

・useCallbackの利用

const countUp = useCallback(() => setCount(count + 1), [count]);
const countDown = useCallback(() => {
  if(count > 0) {
    setCount(count - 1);
  }
}, [count]);

・memoの利用
・コンポーネントの切り出し
今回はボタン自体をコンポーネント化して、propsで動きを変えれるようにした。

const CountButton = memo(({onClick, label}) => 
  <button onClick={onClick}>{label}</button>
)