Let’s get practical

Exercise 1: Focus Management with Refs

Difficulty: Easy Concepts: useRef, DOM manipulation, focus management, accessibility

Build a comment form that manages focus automatically as the user interacts with it.

Requirements:

Create a CommentForm component with a <textarea> and a Submit button
When the component first mounts, the textarea should be focused automatically so the user can start typing immediately
Add a Clear button that clears the textarea content and returns focus to it
After the form is submitted (just console.log the comment text), show a confirmation message and move focus to it — use a <p> with role="status" for the confirmation so screen reader users are notified
The confirmation message should disappear after 3 seconds and focus should return to the textarea

Requirements for refs:

Use at least two refs: one for the textarea and one for the confirmation message
Do not use document.querySelector or any other direct DOM query — all DOM access must go through refs

Hints:

useEffect with an empty dependency array runs once on mount — use it for the initial focus call
The timer ID from setTimeout can be stored in a ref so you can clear it if the component unmounts before it fires
tabIndex={-1} on the confirmation paragraph makes it programmatically focusable without adding it to the tab order

Exercise 2: Refactor a Client Component to a Server Component

Difficulty: Medium Concepts: React Server Components, async components, Next.js App Router, Server Functions

You have a bloated Client Component that fetches a list of blog posts using useEffect. Refactor it into a Server Component and wire up a Server Function to handle marking a post as read.

Starting point:

'use client';

import { useState, useEffect } from 'react';

interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
}

export default function PostList() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    fetch('<https://jsonplaceholder.typicode.com/posts?_limit=10>', {
      signal: controller.signal,
    })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((err) => {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setLoading(false);
        }
      });

    return () => controller.abort();
  }, []);

  if (loading) return <p>Loading posts...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

Part 1 — Refactor to a Server Component:

Remove 'use client', useState, and useEffect entirely
Make the component async and fetch directly in the component body
The result should render identically but with significantly less code

Part 2 — Add a Server Function:

Create a markAsRead Server Function in a separate actions.ts file marked with 'use server'
The function should accept a postId and console.log(Post ${postId} marked as read) — JSONPlaceholder doesn't persist changes so logging is fine
Extract a MarkAsReadButton Client Component that accepts a postId prop and calls markAsRead when clicked
Wrap the call in useTransition so the button shows a pending state while the function runs
Add the button to each post in your Server Component

The final file structure should look like this:

app/
└── posts/
    ├── page.tsx              ← async Server Component
    ├── MarkAsReadButton.tsx  ← Client Component ('use client')
    └── actions.ts            ← Server Function ('use server')

Hints:

Count the lines before and after — the Server Component version should be roughly half the length of the original
MarkAsReadButton needs 'use client' because it uses useTransition and onClick. page.tsx does not
isPending from useTransition can disable the button and show "Marking..." while the Server Function runs

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

CC BY-NC-SA 4.0 Icons

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.

Week 10

Let’s get practical

Exercise 1: Focus Management with Refs

Exercise 2: Refactor a Client Component to a Server Component