fef.tsx

const CountButton = React.memo(function CountButton({ onClick, count }: any) {
  return <button onClick={onClick}>{count}</button>;
});
function DualCounter() {
  const [count1, setCount1] = React.useState(0)
  const [count2, setCount2] = React.useState(0)
  const increment1 = React.useCallback(()=>setCount1(c => c + 1),[]) 
  const increment2 = React.useCallback(()=>setCount2(c => c + 1),[])
  const h=[]
  for(let i=0;i<100;i++){
    h.push(i)
  }
  return (
    <>
      <CountButton count={count1} onClick={increment1} />
      {h.map(()=>(
        <CountButton count={count2} onClick={increment2} />
      ))}
    </>
  )
}
export default DualCounter