useOptimistic for create update and delete operations

With the new useOptimistic hook I wanted to use it for more then just simple setState calls and rather have it work for create, update and delete calls. While this is a new hook and there are not a lot of code out there showing use cases I wanted an opinion on if there is a better way to do it then my below code.

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

I apologize for this not being a 'proper' stack overflow question but I just want to get some opinions on if this is a good way to go about using this hook for this task.


  • Yes, I think your code is spot on. useOptimistic accepts a reducer as a second argument which is what you are passing it.

    A common pattern is using a switch statement within a reducer, so something like this:

    const [optimisticTasks, setOptimisticTasks] = useOptimistic(
      (state, { action, task }: { action: string; task: Task }) => {
        switch (action) {
          case "delete":
            return state.filter(({ id }) => id !==;
          case "update":
            return => ( === ? task : t));
            return [...state, task];

    Another thing I can think of is defining the reducer as a separate function and then passing it to useOptimistic to improve readability, especially as it starts to grow.