How do JavaScript Proxy and Reflect work, and what are practical use cases?

Question

At a framework company: "We want reactive state that auto-triggers re-renders when properties change. How do Proxy and Reflect enable this?"

Interview OS Community · Accepted Answer

## Proxy intercepts object operations

```javascript
const reactive = new Proxy({ count: 0 }, {
  get(target, key) { console.log(`Read: ${key}`); return Reflect.get(target, key); },
  set(target, key, value) { console.log(`Write: ${key} = ${value}`); Reflect.set(target, key, value); scheduleRerender(); return true; }
});
reactive.count;      // "Read: count"
reactive.count = 5;  // "Write: count = 5", triggers rerender
```

| Use Case | How Proxy Helps |
|----------|----------------|
| Validation | Intercept set, validate before writing |
| Reactivity | Track reads/writes for re-rendering |
| Default values | Return defaults for missing properties |
| API client | `api.users.getById(1)` → `/users/1` |

Reflect provides default behavior for proxy traps — always delegate to it.

Loading Application

How do JavaScript Proxy and Reflect work, and what are practical use cases?

Question Details

Suggested Solution

Proxy intercepts object operations

Discussion (0)