How can I implement optimistic updates in a React app using fetch?

How can I implement optimistic updates in a React app using fetch?

To implement optimistic updates, you can update the UI immediately after a user action, then send a fetch request to update the server.

Can you give me a code example of how to do that?

Sure! Here's a simple example:

const handleUpdate = async (newData) => {
  // Optimistically update the state
  setData((prevData) => [...prevData, newData]);

  try {
    const response = await fetch('/api/data', {
      method: 'POST',
      body: JSON.stringify(newData),
      headers: {'Content-Type': 'application/json'},
    });
    if (!response.ok) throw new Error('Network response was not ok');
  } catch (error) {
    // Handle error, e.g., revert the optimistic update
    setData((prevData) => prevData.filter(item => item.id !== newData.id));
  }
};

This code updates the UI immediately and handles potential errors.

What if the fetch request fails? How do I revert the changes?

In the catch block of your fetch request, you can revert the optimistic update by filtering out the newly added data from the state, as shown in the example.