Code Quiz

Component Defined Inside Render

Spot why defining a component inside another destroys state on every render.

Codejavascript

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

  // A small input row for the form
  function TextRow({ label }) {
    const [value, setValue] = React.useState('');
    return (
      <label>
        {label}: <input value={value} onChange={e => setValue(e.target.value)} />
      </label>
    );
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <TextRow label="Name" />
    </div>
  );
}

What is the bug that hurts reconciliation and loses input state?

Next →Reconciliation and Render Performance