react-memo-example.tsx

react-memo-example.tsx

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

const ExpensiveComponent = memo(({ count }: { count: number }) => {
  console.log("Rendered!");
  return <div>Count: {count}</div>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  return (
    <div>
      <ExpensiveComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}