Practice React memo, useMemo and useCallback

app.js

import React, { useState, memo, useMemo, useCallback } from "react";

function Box({ color, onClick }) {
  console.log(`Box color : ${color.color}`);
  return (
    <div
      style={{
        margin: 10,
        width: 75,
        height: 75,
        backgroundColor: color.color,
      }}
      onClick={onClick}
    ></div>
  );
}

const MemoBox = memo(Box);

function App() {
  const [appRender, setAppRender] = useState(0);
  const [color, setColor] = useState("red");
  const onClick = useCallback(() => {}, []);
  console.log(`App re-render : ${appRender}`);
  const colorObj = useMemo(
    () => ({
      color,
    }),
    [color]
  );
  return (
    <>
      <button onClick={() => setAppRender((prevState) => prevState + 1)}>
        App re-render
      </button>
      <button onClick={() => setColor(color === "red" ? "blue" : "red")}>
        Switch Color
      </button>
      <MemoBox color={colorObj} onClick={onClick} />
    </>
  );
}

export default App;