Local State Exercise

Every yellow flash is a re-render. Interact with the demo, spot what shouldn't be flashing, then open the solution tab to see the fix.

1

Exercise 1 of 1

Colocate Form State

Draft state in the root causes NoteList to flash on every keystroke — move it into CreateNote.

App — draft state at root

CreateNote renders: 1

NoteList renders: 1

  • Meeting at 3pm
  • Buy groceries
  • Call dentist

Type in the input. NoteList flashes on every keystroke — it re-renders because App re-renders, even though NoteList doesn't use draft at all.

Re-read the lectureAll lectures →