StrictMode: double render and an extra effect cycle
This example uses StrictMode on purpose. In development React renders twice and runs setup → cleanup → setup, so an effect without cleanup would leave two intervals running. In production each runs once.
The questions almost every React interview asks (virtual DOM, keys, controlled vs uncontrolled inputs, state vs props, the component lifecycle in hooks, StrictMode and more) with model answers and live demos that prove the tricky claims.
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.
Write a TodoList that renders todos (objects with id and text) with correct keys and a delete button per item.
Make a Search component with a controlled input that trims leading spaces as you type and shows Searching for: <text> below it.
Write a Timer effect that logs tick every second while mounted and stops on unmount.
Explain it without notes
What is the virtual DOM, and how does React use it to update the page?
Why do lists need keys, and when is the array index a bad key?
Explain controlled vs uncontrolled inputs. When would you use each?
What's the difference between state and props? What goes wrong if you copy a prop into state?
How do you express mount, update and unmount with hooks?
Preview
Console
Nothing logged yet.Expected console output
render Clock
render Clock
effect: start interval
cleanup: clear interval
effect: start interval