Code QuizIntermediate

State Lifted Too High

Local input state lives in a parent, causing the whole tree to re-render on every keystroke.

Codejavascript

function Page() {
  const [draft, setDraft] = useState('');

  return (
    <div>
      <ExpensiveDashboard />
      <CommentBox value={draft} onChange={setDraft} />
    </div>
  );
}

function CommentBox({ value, onChange }) {
  return (
    <textarea value={value} onChange={(e) => onChange(e.target.value)} />
  );
}

What best-practice issue does this code have?

← PreviousFragment Loses the Key Next →Wrong PropType for Callback