What is the recommended way to create, update and delete operations with useOptimisticAction?

[fprl]

Hi there,

I was wondering, how can we do what's stated in this question? In this case the OP is using react useOptimistic:

const [optimisticTasks, setOptimisticTasks] = useOptimistic(tasks, (state, { action, task }: { action: string, task: Task }) => {
    if (action === 'delete') return state.filter(({ id }) => id !== task.id)
    if(action === 'update') return state.map(t => t.id === task.id ? task : t)
    return [...state, task]
  })

Consider this scenario:

• ListOfTasks: display the tasks and also you have a button to create more (and add them to the list)
• TaskCard: display the task and also have an X to delete it

My question is what is the recommended way to handle an optimistic list of elements, because the ListOfEl is responsable for displaying and adding elements using useOptimisticAction, but the ElCard triggers a delete and we need to update the optimistic list.

Thanks a lot!