React Advance Hooks

Choose refs, context and reducers for different responsibilities.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

A ref holds a value between renders without requesting a render when it changes. Use it to focus your todo input or remember a timer ID; use state for values displayed on screen. The DOM node is available after React attaches it, so focus from an event or an effect.

Context delivers a value to descendants without passing it through every level. A reducer describes transitions from state and action to new state. These are separate tools: refs address imperative access, context addresses delivery and reducers organize updates. Your A → B → C task and rating task are worked through in the State management lesson; the clock is in Lifecycle Hooks.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

import { useRef, useState } from 'react';
export default function App() {
  const input = useRef(null);
  const [text, setText] = useState('');
  const [tasks, setTasks] = useState([]);
  function add(e) {
    e.preventDefault();
    if (!text.trim()) { input.current?.focus(); return; }
    const task = {id: crypto.randomUUID(), text: text.trim()};
    setTasks(old => [...old, task]); setText(''); input.current?.focus();
  }
  return <main><form onSubmit={add}><label>Task <input ref={input} value={text} onChange={e => setText(e.target.value)} /></label><button>Add</button></form><ul>{tasks.map(t => <li key={t.id}>{t.text}</li>)}</ul></main>;
}

Apply this to your assignments

Complete your ref-based todo example. Then revisit the clock, useContext A/B/C, theme background and reducer rating exercises in their dedicated notes. Verify keyboard-only input and submission.

Your existing examples

• UseRef Todolist Component

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Changing ref.current does not update displayed JSX. Avoid reading or writing refs as a substitute for render state.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements