Measure first: render counts with and without memo
Each keystroke re-renders every matching plain card although no task changed; the memo cards render 0 times, because each task prop is the same object as before. Only measured waste like this earns a memo.
Milestone 5: make every action work from the keyboard, keep focus on a card when it moves, announce changes to screen readers, add memo only where render counts show wasted work, and prove the behaviour with Testing Library tests.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make Escape in a card's edit box return focus to that card's ✎ button.
Write a test that the Add button doesn't add an empty task.
Explain it without notes
Why does focus get lost when a card moves to another column, and how do you fix it?
What is a live region and how should you render one in React?
When would you add memo to TaskCard, and what makes it work?
How do role-based queries in tests double as accessibility checks?
Preview
Console
Nothing logged yet.Expected console output
first render: { plain: 4, memo: 4 }
typed "t": { plain: 3, memo: 0 }
typed "te": { plain: 1, memo: 0 }
typed "tes": { plain: 1, memo: 0 }