Optimistic updates pattern in NextJS - Mini Project: Build & Apply

Optimistic Updates Pattern in Next.js

📖 Scenario: You are building a simple task list app where users can add tasks quickly. To make the app feel fast, you want to show the new task immediately on the screen before the server confirms it is saved. This is called an optimistic update.

🎯 Goal: Create a Next.js component that shows a list of tasks and allows adding a new task with optimistic updates. The new task should appear instantly in the list, and if the server call fails, the task should be removed.

📋 What You'll Learn

Create a React functional component called TaskList with initial tasks data

Add a state variable tasks to hold the list of tasks

Add a state variable newTask to hold the input value

Create a function addTask that adds a new task optimistically

Simulate a server call with setTimeout and handle success or failure

Render the list of tasks and an input with a button to add tasks

💡 Why This Matters

🌍 Real World

Optimistic updates make apps feel faster by showing changes immediately, improving user experience in social media, chat apps, and task managers.

💼 Career

Understanding optimistic updates is important for frontend developers working with React or Next.js to build responsive and user-friendly interfaces that handle asynchronous data.

1

Set up initial tasks data

Create a React functional component called TaskList. Inside it, create a state variable called tasks using useState with the initial value as an array of two task objects: { id: 1, text: 'Buy groceries' } and { id: 2, text: 'Walk the dog' }.

NextJS

import React, { useState } from 'react';

export default function TaskList() {
  // Create tasks state with initial two tasks
  // Your code here
}

Need a hint?

Use useState to create tasks with the exact two task objects inside an array.

2

Add input state for new task

Inside the TaskList component, create a state variable called newTask using useState with an initial empty string ''.

NextJS

import React, { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Buy groceries' },
    { id: 2, text: 'Walk the dog' }
  ]);
  // Create newTask state with empty string
  // Your code here
}

Need a hint?

Use useState to create newTask with an empty string.

3

Implement optimistic addTask function

Inside the TaskList component, create a function called addTask. This function should: - Create a new task object with a unique id using Date.now() and text from newTask. - Update tasks state immediately by adding the new task at the end (optimistic update). - Clear the newTask state to an empty string. - Simulate a server call with setTimeout of 1 second. - Inside setTimeout, randomly decide success or failure (use Math.random() < 0.7 for success). - If failure, remove the new task from tasks state by filtering it out using its id.

NextJS

import React, { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Buy groceries' },
    { id: 2, text: 'Walk the dog' }
  ]);
  const [newTask, setNewTask] = useState('');

  // Create addTask function with optimistic update and simulated server call
  // Your code here
}

Need a hint?

Remember to add the new task immediately to tasks state, then simulate a server call with setTimeout. On failure, remove the task by filtering it out.

4

Render tasks list and input with add button

Inside the TaskList component, return JSX that: - Renders an unordered list <ul> with each task's text inside a <li>. Use task.id as the key. - Renders an input field with value bound to newTask and onChange updating newTask. - Renders a button with text Add Task that calls addTask on click. - Use semantic HTML and add aria-label to the input for accessibility. - Wrap the list and input/button inside a <section>.

NextJS

import React, { useState } from 'react';

export default function TaskList() {
  const [tasks, setTasks] = useState([
    { id: 1, text: 'Buy groceries' },
    { id: 2, text: 'Walk the dog' }
  ]);
  const [newTask, setNewTask] = useState('');

  function addTask() {
    const task = { id: Date.now(), text: newTask };
    setTasks(prev => [...prev, task]);
    setNewTask('');

    setTimeout(() => {
      const success = Math.random()  prev.filter(t => t.id !== task.id));
      }
    }, 1000);
  }

  // Return JSX rendering tasks list, input with aria-label, and add button
  // Your code here
}

Need a hint?

Render the tasks inside a <ul> with keys, an input with aria-label, and a button that calls addTask.