Are "React Compiler" and "initialize state with props" compatible?

[yslpn]

Hi. I wanted to ask how the store initialization pattern with props and the new React Compiler fit together? Is there any way to avoid this error in the linter and how safe is it to turn off the linter in this case?

https://zustand.docs.pmnd.rs/guides/initialize-state-with-props

I often use this pattern in my code:

export function MySuperProvider({ myProps, children }: MySuperProps) {
  const storeRef = useRef(createHostStore(myProps));

  return (
    <MySuperContext.Provider value={storeRef.current}>
      {children}
    </MySuperContext.Provider>
  );
}

But I get an eslint error:

Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)eslint(react-compiler/react-compiler)

[dbritto-dev]

@yslpn some docs are outdated, I encourage you to read our new docs at hooks, apis, and middlewares

[dbritto-dev]

@yslpn btw, you could to this:

const [store] = useState(() => createHostStore(myProps))

[dai-shi]

https://x.com/dai_shi/status/1846480778689135014

It's still uncertain if the error is a true positive or a false positive.