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

Optimistic updates pattern

📖 Scenario: You are building a simple task list app using Remix Framework. Users can add new 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: Build a Remix component that lets users add tasks with optimistic updates. The new task appears instantly in the list while the app sends the data to the server in the background.

📋 What You'll Learn

Create a React state variable to hold the list of tasks

Create a state variable to hold the new task text input

Add a form with an input and submit button to add tasks

Implement an optimistic update by adding the new task to the state immediately on submit

Send the new task to the server using Remix action

Handle server response to confirm or rollback the optimistic update

💡 Why This Matters

🌍 Real World

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

💼 Career

Understanding optimistic updates is important for frontend developers working with React and Remix to build smooth, user-friendly interfaces that handle server communication efficiently.

1

Set up initial tasks state

Create a React state variable called tasks initialized with an array containing these two task objects: { id: 1, text: 'Buy groceries' } and { id: 2, text: 'Walk the dog' }.

Remix

import { useState } from 'react'

// Your code here

Hint

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

2

Add new task input state

Add a React state variable called newTaskText initialized to an empty string '' to hold the text input for a new task.

Remix

import { useState } from 'react'

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

  return null
}

Hint

Use useState to create newTaskText with an empty string.

3

Implement optimistic update on form submit

Add a form with an input bound to newTaskText and a submit button. On form submit, prevent default, create a new task object with a unique id using Date.now() and newTaskText, then immediately add this new task to tasks state using setTasks. Also clear newTaskText after adding.

Remix

import { useState } from 'react'

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

  // Your code here

  return null
}

Hint

Use a form with onSubmit handler. Create new task with Date.now() as id. Update tasks state immediately to show optimistic update.

4

Display tasks list and finalize optimistic update

Below the form, add a <ul> element that maps over tasks and renders each task's text inside a <li> with a unique key set to the task's id. This completes the optimistic update pattern by showing tasks instantly.

Remix

import { useState } from 'react'

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

  function handleSubmit(event) {
    event.preventDefault()
    const newTask = { id: Date.now(), text: newTaskText }
    setTasks([...tasks, newTask])
    setNewTaskText('')
  }

  // Your code here

  return (
    
       setNewTaskText(e.target.value)}
        aria-label="New task text"
        required
      />
      Add Task
    
  )
}

Hint

Use tasks.map to render each task inside a <li> with key set to task.id.

Practice

1. What is the main idea behind the optimistic updates pattern in Remix Framework?

easy

A. Only update the UI when the user refreshes the page

B. Update the UI immediately before server confirmation to improve user experience

C. Wait for the server response before updating the UI to ensure accuracy

D. Disable UI updates to avoid any data inconsistency

Solution

1. Step 1: Understand the purpose of optimistic updates

   Optimistic updates aim to make the app feel faster by showing changes immediately.

2. Step 2: Compare UI update timing

   Instead of waiting for server confirmation, the UI updates first, then confirms or rolls back if needed.

3. Final Answer:

   Update the UI immediately before server confirmation to improve user experience -> Option B

4. Quick Check:

   Optimistic updates = Immediate UI update [OK]

Hint: Optimistic means acting before confirmation [OK]

Common Mistakes:

• Thinking UI updates only after server response
• Confusing optimistic updates with pessimistic updates
• Believing UI never updates without refresh

2. Which of the following code snippets correctly shows an optimistic update in Remix using useFetcher?

easy

A. const fetcher = useFetcher(); updateUIImmediately(); fetcher.submit(data);

B. const fetcher = useFetcher(); await fetcher.load('/api/data'); updateUIImmediately();

C. const fetcher = useFetcher(); fetcher.submit(data); updateUIImmediately();

D. const fetcher = useFetcher(); updateUIImmediately(); await fetcher.load('/api/data');

Solution

1. Step 1: Identify the correct order for optimistic update

   Optimistic update means updating UI first, then submitting data to server.

2. Step 2: Check code order

   const fetcher = useFetcher(); updateUIImmediately(); fetcher.submit(data); updates UI immediately, then calls fetcher.submit(data) to send data.

3. Final Answer:

   const fetcher = useFetcher(); updateUIImmediately(); fetcher.submit(data); -> Option A

4. Quick Check:

   UI update before submit = A [OK]

Hint: Update UI before submit for optimistic update [OK]

Common Mistakes:

• Submitting data before updating UI
• Using await with fetcher.load incorrectly
• Not calling fetcher.submit at all

3. Given this snippet using optimistic updates in Remix, what will the UI show immediately after handleClick is called?

const [count, setCount] = useState(0);
const fetcher = useFetcher();

function handleClick() {
  setCount(count + 1); // optimistic update
  fetcher.submit({ count: count + 1 }, { method: 'post' });
}

medium

A. The count will increase by 1 immediately

B. The count will stay the same until server responds

C. The count will increase by 2 immediately

D. The count will reset to 0 immediately

Solution

1. Step 1: Analyze the optimistic update call

   The setCount(count + 1) updates the UI state immediately by adding 1.

2. Step 2: Understand fetcher.submit effect

   The server call happens after UI update, so UI shows incremented count before server response.

3. Final Answer:

   The count will increase by 1 immediately -> Option A

4. Quick Check:

   setCount before submit = immediate UI change [OK]

Hint: UI changes immediately on setState before server call [OK]

Common Mistakes:

• Thinking UI waits for server response
• Confusing count value increments
• Assuming double increment happens

4. You implemented optimistic updates but users report the UI sometimes shows wrong data after server errors. What is the best way to fix this in Remix?

medium

A. Disable optimistic updates completely

B. Ignore server errors and keep optimistic UI as is

C. Reload the entire page on every server error

D. Rollback the UI state to previous value when server returns an error

Solution

1. Step 1: Understand error handling in optimistic updates

   When server errors occur, UI must revert to correct data to avoid confusion.

2. Step 2: Choose rollback strategy

   Rollback UI state to previous known good value to keep data consistent.

3. Final Answer:

   Rollback the UI state to previous value when server returns an error -> Option D

4. Quick Check:

   Error handling = rollback UI [OK]

Hint: Rollback UI on error to keep data correct [OK]

Common Mistakes:

• Ignoring errors causing stale UI
• Reloading page disrupts user experience
• Disabling optimistic updates loses speed benefits

5. You want to implement an optimistic update for a todo list in Remix. Which approach correctly handles adding a new todo with immediate UI update and error rollback?

function addTodo(newTodo) {
  const previousTodos = todos;
  setTodos([...todos, newTodo]); // optimistic update
  fetcher.submit({ todo: newTodo }, { method: 'post' });
}

hard

A. This approach correctly updates UI first and rolls back on server error

B. This approach waits for server before updating UI, so not optimistic

C. Rollback is missing, so UI will never revert on error

D. setTodos is called twice before server response, causing race conditions

Solution

1. Step 1: Check optimistic update implementation

   The UI updates immediately by adding newTodo to the list.

2. Step 2: Verify error rollback logic

   Rollback is missing. fetcher.submit() does not return a Promise and there is no useEffect or other logic to check fetcher.state or fetcher.data for errors and revert the state.

3. Final Answer:

   Rollback is missing, so UI will never revert on error -> Option C

4. Quick Check:

   Optimistic update + missing rollback [OK]

Hint: Use fetcher.state === 'idle' && fetcher.data.error to rollback [OK]

Common Mistakes:

• Not saving previous state before update
• Not handling server error to rollback
• Waiting for server before UI update