Hello,

I am working on a Next.js 14 project and facing an issue with the useOptimistic hook. My goal is to implement an optimistic UI for a drag-and-drop feature in my application.

I've set up the useOptimistic hook to manage the state of a list of work experiences. When items in the list are reordered via drag-and-drop, I use useOptimistic to update the UI optimistically. Here's a snippet of the relevant code:

const [optimisticWorkExperiences, addOptimisticUpdate] = useOptimistic(
  resume.workexperiences,
  (currentExperiences, updatedExperiences) => updatedExperiences,
);

const onDragEnd = async (result) => {
  addOptimisticUpdate(updatedItems);
  try {
    await updateWorkExperienceSortOrder(updatedItems);
  } catch (error) {

  }
};
return(

{optimisticWorkExperiences.map((workexperience, index) => (
                <Draggable
                  key={workexperience.id}
                  draggableId={workexperience.id.toString()}
                  index={index}
                >
...
)

Here is the Action that we call, and its calling revalidatePath.

export async function updateWorkExperienceSortOrder(updatedWorkExperiences) {
  for (const workExperience of updatedWorkExperiences) {
    await db.workExperience.update({
      where: { id: workExperience.id },
      data: { sortOrder: workExperience.sortOrder },
    });
  }
  console.log('uupp', updatedWorkExperiences);
  revalidatePath(`/resume/${updatedWorkExperiences[0].resumeId}`);
}

So adding a new workExperience doesnt update the UI, should still the useOptimistic update it state because we call revalidatePath in the action, because it gets new workExperience, or i'm missing somethign here?

export async function createWorkExperience(formData: WorkExperienceType) {
  const workExperience = await db.workExperience.create({
    data: formData,
  });
  revalidatePath(`/resume/${workExperience.resumeId}`);
}