Why optimistic UI improves perceived performance in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to update the UI immediately when a user clicks the button.

Remix

function handleClick() {
  setState({ loading: true });
  updateUI({ optimistic: [1] });
  sendRequest();
}

Drag options to blanks, or click blank then click option'

Anull

Btrue

Cundefined

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using false or null prevents immediate UI update.

Leaving the value undefined causes no change.

Setting optimistic to true updates the UI immediately, showing the user the expected result before the server responds.

2fill in blank

medium

Complete the code to rollback UI changes if the server request fails.

Remix

async function saveData() {
  try {
    await sendRequest();
  } catch (error) {
    setState({ data: [1] });
  }
}

Drag options to blanks, or click blank then click option'

ApreviousData

BnewData

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using newData would keep the optimistic change even on failure.

Setting null or undefined clears the data unexpectedly.

If the request fails, we restore the UI to previousData to undo the optimistic update.

3fill in blank

hard

Fix the error in the optimistic update function by completing the missing part.

Remix

function optimisticUpdate(state, action) {
  return {
    ...state,
    items: state.items.[1](action.item),
  };
}

Drag options to blanks, or click blank then click option'

Afilter

Bshift

Cpop

Dconcat

Attempts:

3 left

💡 Hint

Common Mistakes

filter removes items, not adds.

pop and shift remove items from arrays.

Using concat adds the new item to the list without mutating the original array, which is important for state updates.

4fill in blank

hard

Fill both blanks to create an optimistic UI update that shows loading and adds the new item.

Remix

function updateState(state, action) {
  return {
    ...state,
    loading: [1],
    items: state.items.[2](action.item),
  };
}

Drag options to blanks, or click blank then click option'

Atrue

Bfalse

Cconcat

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Setting loading to false means no loading indicator.

Using filter removes items instead of adding.

Setting loading to true shows the UI is waiting, and using concat adds the new item optimistically.

5fill in blank

hard

Fill all three blanks to implement optimistic UI with rollback on failure.

Remix

async function saveItem(state, action) {
  const previousItems = state.items;
  setState({
    items: state.items.[1](action.item),
    loading: [2],
  });
  try {
    await sendRequest(action.item);
    setState({ loading: [3] });
  } catch {
    setState({ items: previousItems, loading: false });
  }
}

Drag options to blanks, or click blank then click option'

Aconcat

Btrue

Cfalse

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter removes items instead of adding.

Setting loading incorrectly causes wrong UI feedback.

We optimistically add the item with concat, set loading to true while waiting, and set loading to false after success.

Practice

1. What is the main reason optimistic UI improves perceived performance in Remix apps?

easy

A. It shows UI changes immediately before server confirmation

B. It waits for the server response before updating UI

C. It disables user input during server requests

D. It reloads the entire page after each action

Solution

1. Step 1: Understand optimistic UI behavior

   Optimistic UI updates the interface immediately when a user acts, without waiting for the server.

2. Step 2: Compare with other options

   Waiting for server or reloading page delays UI feedback, reducing perceived speed.

3. Final Answer:

   It shows UI changes immediately before server confirmation -> Option A

4. Quick Check:

   Immediate UI update = D [OK]

Hint: Optimistic UI updates instantly, no waiting for server [OK]

Common Mistakes:

• Thinking UI waits for server response
• Confusing optimistic UI with disabling input
• Assuming page reload improves speed

2. Which code snippet correctly shows an optimistic UI update in Remix using useFetcher?

easy

A. fetcher.submit(data); updateUIImmediately();

B. await fetcher.submit(data); updateUIImmediately();

C. fetcher.load('/data'); updateUIAfterLoad();

D. fetcher.reset(); updateUIAfterReset();

Solution

1. Step 1: Identify optimistic UI pattern

   Optimistic UI updates UI immediately, so updateUIImmediately() must run without waiting.

2. Step 2: Analyze code snippets

   fetcher.submit(data); updateUIImmediately(); calls submit then updates UI immediately. await fetcher.submit(data); updateUIImmediately(); waits (await) before UI update, not optimistic.

3. Final Answer:

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

4. Quick Check:

   Immediate UI update after submit = B [OK]

Hint: Optimistic UI updates before awaiting server response [OK]

Common Mistakes:

• Using await before UI update
• Confusing fetcher.load with submit
• Resetting fetcher instead of submitting

3. Given this Remix code snippet, what will the user see immediately after clicking the submit button?

const fetcher = useFetcher();
function handleClick() {
  fetcher.submit({ text: 'Hello' });
  setMessage('Sending...');
}

medium

A. An error message appears immediately

B. The message updates only after server response

C. No message appears until page reload

D. The message 'Sending...' appears immediately

Solution

1. Step 1: Understand the code flow

   handleClick calls fetcher.submit then immediately sets message to 'Sending...'.

2. Step 2: Determine UI update timing

   setMessage runs immediately, so UI shows 'Sending...' right after click.

3. Final Answer:

   The message 'Sending...' appears immediately -> Option D

4. Quick Check:

   Immediate setState update = A [OK]

Hint: UI updates right after setState call, no wait needed [OK]

Common Mistakes:

• Assuming message waits for server
• Thinking submit blocks UI update
• Confusing fetcher.submit with fetcher.load

4. Identify the bug in this optimistic UI code snippet:

const fetcher = useFetcher();
function handleSubmit(data) {
  fetcher.submit(data);
  setItems([...items, data]);
}
// Later, if server rejects, no rollback is done

medium

A. setItems mutates state directly instead of copying

B. fetcher.submit is called incorrectly without await

C. No error handling to revert UI on server failure

D. handleSubmit is missing event.preventDefault()

Solution

1. Step 1: Review optimistic UI update

   UI updates immediately by adding data to items before server confirms.

2. Step 2: Check error handling

   No rollback or error handling means UI can show wrong data if server rejects.

3. Final Answer:

   No error handling to revert UI on server failure -> Option C

4. Quick Check:

   Missing rollback on failure = C [OK]

Hint: Optimistic UI needs rollback on server error [OK]

Common Mistakes:

• Thinking await is required for optimistic update
• Confusing state mutation with copying
• Assuming preventDefault is always needed

5. In a Remix app, you want to implement optimistic UI for adding comments. Which approach best ensures perceived performance and data consistency?

hard

A. Wait for server response before updating UI to avoid inconsistencies

B. Update UI immediately, then rollback if server rejects, showing error message

C. Reload the page after server confirms to show new comment

D. Disable comment input until server responds to prevent errors

Solution

1. Step 1: Understand optimistic UI goals

   Optimistic UI updates UI immediately to feel fast but must handle errors to stay consistent.

2. Step 2: Evaluate options for consistency

   Update UI immediately, then rollback if server rejects, showing error message updates UI immediately and rolls back on error, balancing speed and correctness.

3. Final Answer:

   Update UI immediately, then rollback if server rejects, showing error message -> Option B

4. Quick Check:

   Optimistic update + rollback = A [OK]

Hint: Optimistic UI needs rollback on failure for consistency [OK]

Common Mistakes:

• Waiting for server loses perceived speed
• Reloading page is slow and jarring
• Disabling input reduces user experience