useMemoの使い方

React.memoは、不要な再レンダリングを防ぐための高階コンポーネントです。
特に親コンポーネントが更新されても、子コンポーネントのpropsに変更がなければ再レンダリングをスキップしてくれます。

✅ 使い方（基本）

import React from 'react'

// 通常の関数コンポーネント
const Child = ({ value }: { value: number }) => {
  console.log('Childレンダリング')
  return 
<div>{value}</div>
}

// React.memoでラップ
export const MemoizedChild = React.memo(Child)

🔁 使用例

import React, { useState } from 'react'
import { MemoizedChild } from './MemoizedChild'

const Parent = () => {
  const [count, setCount] = useState(0)
  const [other, setOther] = useState(0)

  return (

<div>

<h2>親: {count}</h2>
      <button onClick={() => setCount(count + 1)}>カウント +1</button>
      <button onClick={() => setOther(other + 1)}>他の状態 +1</button>

      {/* propsが変わらない限りMemoizedChildは再レンダリングされない */}
      <MemoizedChild value={100} />
    </div>
  )
}

🔍 注意点

• 関数のprops（例: onClick={() => ...}）は毎回新しい参照になるため、再レンダリングされる可能性あり
• 回避するにはuseCallbackを併用するのが一般的です

🔗 参考：
公式ドキュメント（React.memo）