Cannot update a component while rendering a different component

[yoavst]

Given the following code:

function App() {
    const [count, setCount] = useLocalStorageState<number>('count', { defaultValue: 0 })

    if (count > 5) {
        setCount(0)
    }
    return <div className="card">
                <button
                    onClick={() => {
                        setCount((count) => count + 1)
                    }}
                >
                    count is {count}
                </button>
            </div>
}

The setCount(0) line will throw a warning of:

App.tsx:11 Warning: Cannot update a component (`App`) while rendering a different component (`App`). To locate the bad setState() call inside `App`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at App (http://localhost:5173/src/App.tsx?t=1733173762885:24:29)
    printWarning @ chunk-XPR23Y44.js?v=1a9b5ea3:519
    error @ chunk-XPR23Y44.js?v=1a9b5ea3:503
    warnAboutRenderPhaseUpdatesInDEV @ chunk-XPR23Y44.js?v=1a9b5ea3:19791
    scheduleUpdateOnFiber @ chunk-XPR23Y44.js?v=1a9b5ea3:18544
    forceStoreRerender @ chunk-XPR23Y44.js?v=1a9b5ea3:11997
    handleStoreChange @ chunk-XPR23Y44.js?v=1a9b5ea3:11979
    onChange @ use-local-storage-state.js?v=f253ee13:25
    triggerCallbacks @ use-local-storage-state.js?v=f253ee13:99
    (anonymous) @ use-local-storage-state.js?v=f253ee13:68
    App @ App.tsx:11
    renderWithHooks @ chunk-XPR23Y44.js?v=1a9b5ea3:11546
    updateFunctionComponent @ chunk-XPR23Y44.js?v=1a9b5ea3:14580
    beginWork @ chunk-XPR23Y44.js?v=1a9b5ea3:15922
    beginWork$1 @ chunk-XPR23Y44.js?v=1a9b5ea3:19751
    performUnitOfWork @ chunk-XPR23Y44.js?v=1a9b5ea3:19196
    workLoopSync @ chunk-XPR23Y44.js?v=1a9b5ea3:19135
    renderRootSync @ chunk-XPR23Y44.js?v=1a9b5ea3:19114
    performSyncWorkOnRoot @ chunk-XPR23Y44.js?v=1a9b5ea3:18872
    flushSyncCallbacks @ chunk-XPR23Y44.js?v=1a9b5ea3:9117
    (anonymous) @ chunk-XPR23Y44.js?v=1a9b5ea3:18625

This pattern is recommended by react docs.

[astoilkov]

I've been aware of this limitation/bug but didn't do anything about it as nobody has reported it until now. I'll spend some time researching this and will get back to you. Thanks for reporting!

[astoilkov]

This is caused by what seems to be a bug in React where using useSyncExternalStore to update a component during render instead of useState causes the error. Here's the issue I found where a few users complain about it: react/react#26962.

I'm not sure what I can do about this. Maybe reopen a new issue in React because this was automatically closed. What do you think?

[astoilkov]

Done, I've created a new issue in React — react/react#31730.

Let's see if this is really a bug in React or some behavior I'm not aware of.

[yoavst]

Thanks! Let's wait for their reply

[rjgotten]

@astoilkov

I'm not sure what I can do about this.

You've modeled the onChange of your external store as a simple array of callback functions.
And you trigger a change 'event' via triggerCallbacks by iterating over the array and synchronously calling each callback.

Instead, construct a singleton EventTarget instance and dispatch a real event to that (and register real event listeners with it). Doing so will go through the browser event loop and should stop any changes started during the render of one component, kicking off a change and re-render in another component during render.

Not sure if scheduling a micro-task would also get the job done, since React internally relies on queuing micro tasks itself and you might end up interleaving things in a bad way that still screws it up. So probably EventTarget and the event loop is 'more safe.'

[astoilkov]

@rjgotten I've tried to implement your suggestion as I understand it, however, it still didn't work. Can you take a look and modify it so it doesn't throw the warning in the console?

https://codesandbox.io/p/sandbox/polished-wind-forked-59lhmk?workspaceId=ws_TJ5X18hwBR26uCHSqrFKDR