The idea behind reactive frameworks
No code calls render() after changing the count: the proxy notices writes. Setting the same value twice doesn't re-render. Click +1 to see more lines.
A Proxy wraps an object and lets you intercept basic operations on it (reading, writing, deleting, in, calling) with handler functions called traps; Reflect offers the default version of each operation, so a trap can add behaviour and then do the normal thing.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write readOnly(obj) that returns a proxy where reads work but any write or delete throws Error("read-only"). Show both behaviours.
Write a proxy env where reading a missing key throws ReferenceError("Unknown setting: <key>") instead of returning undefined, so typos are caught.
Explain it without notes
What is a Proxy and what is a trap? Give three traps and the operations they intercept.
Why is Reflect usually used inside traps?
How would you validate property values with a Proxy, and how does strict mode affect it?
Explain how a Proxy can make UI reactive, and what its limits are.
Preview
Console
Nothing logged yet.Expected console output
count: 0 -> 5
count: 5 -> 6