Do you know Next.js hook?

[Luis96920]

I wanna to know about useOptimistic in Next.js. Who can explain detail?

[sergiourrego]

useOptimistic is a hook introduced in Next.js 13.4 to simplify handling optimistic UI updates in React applications. Optimistic updates allow your UI to reflect changes immediately, even before receiving a response from the server. This improves the user experience by making the app feel faster and more responsive.

What is an Optimistic Update?
Optimistic updates assume that a user action will succeed, so they update the UI as if it has already succeeded, without waiting for the actual confirmation from the backend. If the action fails, you can handle the error and potentially roll back the changes.

For example, when adding an item to a to-do list, the item is immediately shown in the list before the server has confirmed the operation.

How useOptimistic Works
useOptimistic is designed to help you manage local state that needs to be updated optimistically. It works similarly to useReducer by taking an initial state and an updater function that modifies the state when new data comes in.

Here’s the structure of useOptimistic:

js
Copy code
const [optimisticState, updateOptimisticState] = useOptimistic(initialState, reducerFunction);
optimisticState: This is the current state (e.g., the to-do list).
updateOptimisticState: This is the function you call to optimistically update the state.
initialState: This is the initial state of your data before any optimistic updates (e.g., the list of to-dos fetched from the server).
reducerFunction: This function describes how to update the state when new optimistic data is added. It behaves like the reducer in useReducer.
Example of useOptimistic
Here’s a breakdown using a to-do list as an example:

jsx
Copy code
import { useState, useTransition } from 'react';
import { useOptimistic } from 'next/navigation';

export default function ToDoList() {
const [todos, setTodos] = useState([{ id: 1, text: 'Buy groceries' }]); // Initial state from server.
const [isPending, startTransition] = useTransition(); // For smooth transitions

// Initialize useOptimistic to handle local optimistic state.
const [optimisticTodos, updateTodos] = useOptimistic(todos, (state, newTodo) => {
// This reducer handles how to update the local state when new data (newTodo) comes in.
return [...state, newTodo];
});

const addTodo = async (newTodoText) => {
const newTodo = { id: Date.now(), text: newTodoText };

// Update the optimistic state right away
updateTodos(newTodo);

// Simulate a server request to actually add the to-do
await fetch('/api/addTodo', {
  method: 'POST',
  body: JSON.stringify(newTodo),
});

};

const handleAddTodo = (event) => {
event.preventDefault();
const newTodoText = event.target.elements.todoText.value;
event.target.reset();

// Start the transition to update UI optimistically
startTransition(() => {
  addTodo(newTodoText);
});

};

return (

To-Do List

Add

{optimisticTodos.map((todo) => (

• {todo.text}

))}

);
}
Key Points:
Initial State: The initial list of to-dos is fetched from the server.
Optimistic Update: When a user submits a new to-do, updateTodos is called to immediately update the UI with the new task. The server request (with fetch) is still ongoing, but the user doesn’t have to wait.
Reducer Function: The reducer function takes the current state and the new optimistic data (the new to-do) and returns the updated state.
Transition: useTransition ensures that the UI remains responsive during the async operation.
Benefits of Using useOptimistic:
Improved User Experience: Users see the changes immediately, without having to wait for the backend.
Responsive UI: Helps maintain the app's responsiveness, especially in cases where network latency might affect user perception.
Cleaner Code: Simplifies the process of managing optimistic updates, avoiding manual state management in scenarios where async operations are involved.
useOptimistic is perfect for scenarios where immediate feedback is essential, like form submissions, data updates, or when performing CRUD operations on client data.

[Luis96920]

Thank you.