Should not set the useRef current value during rendering

[Jón Trausti]

What docs page needs to be fixed?

• Section: Per-route state
• Page: https://redux.js.org/usage/nextjs

What is the problem?

The suggested way of storing the store in a useRef does not follow the guidelines from React. That is, we are not supposed to set the value of current during rendering.

Do not write or read ref.current during rendering.

• https://react.dev/reference/react/useRef

Here's the piece of code from the documentation:

const storeRef = useRef<AppStore | null>(null)
if (!storeRef.current) {
  storeRef.current = makeStore()
  storeRef.current.dispatch(initializeCount(count))
}

What should be changed to fix the problem?

Not quite sure. I managed to create the store outside the component just fine with NextJS client component. Unsure what side-effects that will have. But it seems to work just fine since nothing in the store is SSR or RSC.

[Ben Durrant]

The documentation you're quoting says

Do not write or read ref.current during rendering, except for initialization.

if you read the section on initialization, that's exactly what we're doing here.

[Lenz Weber-Tronic]

Also, definitely do not create a store for usage in Next.js outside of a component. Your components will SSR and this can have all kinds of weird consequences.