What is Memoization?

// Regular component (re-renders every time)
function RegularCounter({ count }) {
  const [renderCount, setRenderCount] = React.useState(0);

  React.useEffect(() => {
    setRenderCount(prev => prev + 1);
  });

  return (
    <div className="counter regular">
      <h3>Regular Component</h3>
      <p className="value">Count: {count}</p>
      <div className="render-badge">{renderCount} renders</div>
    </div>
  );
}

// Memoized component (only re-renders when props change)
const MemoizedCounter = React.memo(function Counter({ count }) {
  const [renderCount, setRenderCount] = React.useState(0);

  React.useEffect(() => {
    setRenderCount(prev => prev + 1);
  });

  return (
    <div className="counter memoized">
      <h3>React.memo Component</h3>
      <p className="value">Count: {count}</p>
      <div className="render-badge">{renderCount} renders</div>
    </div>
  );
});

function App() {
  const [count, setCount] = React.useState(0);
  const [other, setOther] = React.useState(0);

  return (
    <div className="demo-app">
      <div className="header">
        <h2>⚡ React.memo Demo</h2>
        <p>Watch render counts when parent re-renders</p>
      </div>

      <div className="controls">
        <div className="control-group">
          <button onClick={() => setCount(count + 1)}>
            Change Count (affects both)
          </button>
          <p className="hint">Both will re-render (prop changed)</p>
        </div>

        <div className="control-group">
          <button onClick={() => setOther(other + 1)} className="secondary">
            Change Other ({other})
          </button>
          <p className="hint success">Only Regular re-renders (memo prevents it!)</p>
        </div>
      </div>

      <div className="components-grid">
        <RegularCounter count={count} />
        <MemoizedCounter count={count} />
      </div>

      <div className="info">
        <p><strong>✅ React.memo prevents re-renders</strong> when props haven't changed!</p>
        <p>Click "Change Other" to see memo skip unnecessary renders.</p>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);