How can I implement optimistic updates with Axios in React Native?

How can I implement optimistic updates with Axios in React Native?

To implement optimistic updates, you can temporarily update the UI before the server confirms the change. First, make a local state update, then send the Axios request.

Can you show me a code example for that?

Sure! Here's a simple example:

const [data, setData] = useState(initialData);

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

  try {
    await axios.post('/api/data', newData);
  } catch (error) {
    // Handle error, possibly revert the optimistic update
    console.error('Error updating data:', error);
  }
};

This updates the UI immediately while waiting for the server response.

What if the server response fails?

In that case, you should handle the error by reverting the optimistic update. You can store the previous state and restore it if the request fails.

Is there a way to show a loading indicator during the update?

Yes! You can use a loading state to indicate that the update is in progress. Set a loading state to true before the Axios call and false after it completes.