🔁 再レンダリングはいつ起こるのか？

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

  console.log('Counter レンダリング'); // 毎回実行される

  return (
    <div>
      <p>{count}</p>
      {/* setCountを呼ぶ → Counterが再レンダリングされる */}
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

const ThemeContext = createContext('light');

function App() {
  const [theme, setTheme] = useState('light');

  return (
    // valueが変わると、useContext(ThemeContext)を使う
    // すべてのコンポーネントが再レンダリングされる
    <ThemeContext.Provider value={theme}>
      <Layout>
        <Header />  {/* useContextを使っていれば再レンダリング */}
        <Main />    {/* useContextを使っていれば再レンダリング */}
      </Layout>
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        テーマ切替
      </button>
    </ThemeContext.Provider>
  );
}

// このコンポーネントは ThemeContext を購読している
function Header() {
  const theme = useContext(ThemeContext);
  // themeが変わるたびにHeaderは再レンダリングされる
  return <header className={theme}>...</header>;
}

// useContextを呼んでいないコンポーネントは再レンダリングされない
function Footer() {
  return <footer>© 2024</footer>;  // ← contextが変わっても影響なし
}

// Object.isの比較ルール
Object.is(1, 1)           // true  → 再レンダリングなし
Object.is('a', 'a')       // true  → 再レンダリングなし
Object.is(true, true)     // true  → 再レンダリングなし
Object.is(null, null)     // true  → 再レンダリングなし
Object.is(undefined, undefined) // true → 再レンダリングなし

Object.is({}, {})         // false → 再レンダリングあり（新しい参照）
Object.is([], [])         // false → 再レンダリングあり（新しい参照）
Object.is(() => {}, () => {}) // false → 再レンダリングあり（新しい参照）

// ⚠️ NaNの特殊ケース（==やObject.isの違い）
NaN === NaN               // false（通常の===演算子）
Object.is(NaN, NaN)       // true（Object.isは正しくNaNを扱う）

// コンポーネントツリー
// App
//   ├── Header（カート件数を表示）← CartContextを使用
//   ├── ProductList
//   │   ├── ProductCard × N   ← React.memoでラップ済み
//   └── CartSidebar           ← CartContextを使用
//       └── CartItem × N      ← React.memoでラップ済み

const CartContext = createContext({ items: [], addItem: () => {} });

function App() {
  const [cartItems, setCartItems] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');

  const addItem = useCallback((item) => {
    setCartItems(prev => [...prev, item]);
  }, []);

  const cartValue = useMemo(
    () => ({ items: cartItems, addItem }),
    [cartItems, addItem]
  );

  // searchQueryが変わったとき:
  // → App が再レンダリング
  // → Header: CartContextが変わっていない → useMemoにより同じvalue → 再レンダリなし
  // → ProductList: 再レンダリング（Appの子）
  // → ProductCard: React.memoによりpropsが変わらなければスキップ
  // → CartSidebar: CartContextが変わっていない → 再レンダリなし

  // addItem（カートに追加）が呼ばれたとき:
  // → cartItemsが変わる → App が再レンダリング
  // → cartValue が変わる（useMemoの依存変更）
  // → Header: CartContextが変わった → 再レンダリング
  // → CartSidebar: CartContextが変わった → 再レンダリング
  // → ProductList: 再レンダリング（Appの子）
  // → ProductCard: React.memoによりpropsが変わらなければスキップ

  return (
    <CartContext.Provider value={cartValue}>
      <Header />
      <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
      <ProductList query={searchQuery} />
      <CartSidebar />
    </CartContext.Provider>
  );
}