Next.js Discord

Discord Forum

useOptimistic with reactStrictMode: True

Unanswered
Polar bear posted this in #help-forum
Open in Discord
Polar bearOP
Hi! I'm experimenting with server actions and useOptimistic.

I have this minimal component that optimistically increments optimisticFoo.
This works if I have the reactStrictMode: false, but not with it enabled:

Log (with strict mode):
14:34:49.296 optimisticFoo 1
14:34:49.296 optimisticFoo 0
14:34:49.807 optimisticFoo 2
14:34:49.807 optimisticFoo 0
14:34:50.232 optimisticFoo 3
14:34:55.488 optimisticFoo 0


Log (WITHOUT strict mode):
14:40:55.946 optimisticFoo 1
14:40:56.329 optimisticFoo 2
14:40:56.729 optimisticFoo 3
14:40:57.104 optimisticFoo 4


import {experimental_useOptimistic as useOptimistic} from "react";
import {myServerAction} from "@/app/game/[id]/actions";

export function BoardColumn() {
    const [optimisticFoo, optimisticIncrFoo] = useOptimistic(
        0,
        (state, v: number) => (state + v),
    )

    console.log('optimisticFoo', optimisticFoo)
    return <form
        action={async () => {
            optimisticIncrFoo(1)
            await myServerAction(123)
        }}>
        <div>{optimisticFoo}</div>
        <button type="submit"> INCR</button>
    </form>
}


Is this an indication that I have designed it incorrectly, or is this a problem between useOptimistic and react strict mode?

3 Replies

Sloth bear
@Polar bear did you figure this out? I am having a similar issue where the info being added to my addOptimisticFoo function is showing it was added but then is immediately cleared
Polar bearOP
Hey! @Sloth bear Removing strict mode worked, as far as I can tell. As I said, I don't know if it is prudent to remove it though 🙂

This might be a question for the react team rather than Next, I guess.
Sloth bear
You just gave me so much relief. I was doing absolutely everything correct and running into this issue.

Asked all the bots and they confirmed I was doing it right.

I guess it's not ideal to remove strict mode but it does make it work so thank you so much! I can now rest easy 😅