時刻を表示する

const ChildComponent = () => {
  const id = new Date().getTime();

  return (
    <div>
      <p>{id}</p>
    </div>
  );
};

色を変える

import * as React from "react"
import { StateContext } from "./app"

export const Count = () => {
  const context = React.useContext(StateContext)
  const getColor = () => Math.floor(Math.random() * 255)
  const style = {
    color: `rgb(${getColor()},${getColor()},${getColor()})`,
  }
  return <div style={style}>count: {context.count}</div>
}

● React Dev Tools でサイレンダリングを確認するときのポイント

React DevTools の Profiler では、コンポーネントが再レンダリングされた理由を以下のようなアイコンで表示します：

🧠 (脳): Props や State の変更
⚙️ (歯車): Context の変更
👥 (人): Parent コンポーネントの再レンダリング
🔄 (矢印): Force update や useReducer