Controlled and uncontrolled side by side
Type in both. The controlled box can't hold lowercase letters or more than six characters, because React state decides what it shows. The uncontrolled box keeps whatever you type until you read it.
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.