React Hooks

Q1: What does the spread operator (...) do when updating state? `setState({...oldState, key: newValue})`

Q2: 🎮 A game needs to listen for keyboard events when mounted and stop listening when unmounted. Complete the pattern: ```javascript useEffect(() => { const handleKeyPress = (e) => { /* game logic */ }; {{1}}.addEventListener('{{2}}', handleKeyPress); return () => { {{1}}.{{3}}('{{2}}', handleKeyPress); }; }, []); ```

Q3: 🎭 You're building a modal dialog. It should show when `isOpen` is true. Fill in the conditional rendering: `{{{1}} && <Modal />}`

Q4: 📈 You're building analytics tracking. Multiple components need to track events. Where should the tracking context Provider be placed and why? ``` App ├── PublicPages (no tracking) └── AuthenticatedApp ├── Dashboard (track visits) ├── Settings (track changes) └── Profile (track views) ```

Q5: 🌐 You're building a search component that should fetch results as the user types. The search query is in state. What dependency should your fetch effect have? ```javascript const [query, setQuery] = useState(''); const [results, setResults] = useState([]); useEffect(() => { fetch(`/api/search?q=${query}`) .then(res => res.json()) .then(setResults); }, ___); ```