Bug: Stale values returned from useOptimistic when state changes about react

[acdlite]

The fix has now landed in the most recent React and Next.js canaries. Thanks for the bug report!

[acdlite]

This is, indeed, a bug — I apologize for not looking into this until now (thanks @tom-sherman for the ping on Twitter X). I remember getting the ping from @sophiebits but forgot to follow up.

Should be fixed by #27936

[JovanJevtic]

2024-01-11.00-42-19.mp4

`
'use client'

import { addTodo } from "@/actions/todo";
import { Todo } from "@prisma/client";
import { ElementRef, useOptimistic, useRef } from "react";
import { v4 as uuid } from 'uuid'
import AddButton from "./AddButton";

type Props = {
todos: Todo[]
}

const Form = ({ todos }: Props) => {

const formRef = useRef<ElementRef<'form'>>(null)

const [optimisticTodos, addOptimisticTodo] = useOptimistic<Todo[], string>(
    todos,
    (currTodos, newTodo: string) => {
        return [
            {
                text: newTodo,
                id: uuid(),
                createdAt: new Date(Date.now()),
                updatedAt: new Date(Date.now())
            },
            ...currTodos
        ]
    }  
)

return(
    <>
        <form
            ref={formRef}
            action={async formData => {
                formRef.current?.reset();

                addOptimisticTodo(formData.get("text") as string)

                await addTodo(formData)
            }}
            className="flex-row flex"
        >
            <label>Input text</label>
            <input 
                type="text"
                name="text"
                className="bg-blue-950"
            />
            <AddButton />
        </form>
        <ul className="mt-5">
            {
                optimisticTodos.map(todo => (
                    <li key={todo.id} className="mb-3">
                    <p>{todo.text}</p>
                    </li>
                ))
            }
        </ul>
    </>
);

}

export default Form
`

[magoz]

I'm experiencing the same issue.

[Feel-ix-343]

Me too. Downgrading to next 13 solves it for now

[rieznik]

I'm experiencing the same issue.

[ipv6sq]

same issue here.

[Elee-Lawleit]

same here, for me it sometimes flashes the correct value before changing back to the original value

[JovanJevtic]

Same here. It's not more experimental version, why is this happening?

[JovanJevtic]

same here, for me it sometimes flashes the correct value before changing back to the original value

For me it does every time

[tom-sherman]

When there is no form submission in progress, the optimisticArr always returns the initial state provided to it.

I think this is an expected behaviour of useOptimistic. Or rather, the optimistic update is replaced with the new state as soon as the transition is over. When there is no async work in the transition, the optimistic update is replaced instantly.

Edit: In fact it says exactly that in the first line of the docs (emphasis my own):

useOptimistic is a React Hook that lets you show a different state while an async action is underway. It accepts some state as an argument and returns a copy of that state that can be different during the duration of an async action such as a network request.

It's expected for useOptimistic to essentially do nothing outside of async transitions.