React 18 - Avoiding hydration errors, but initialize client-only state directly if possible

This question is about hydration errors and workarounds that are future-proof for React 18 partial hydration and concurrent mode. React hydration rules say that the server rendered html needs to match the client rendered dom that is rendered during the initial render in `hydrate()`. Mismatches (=slight differences in dom output) can cause all kinds of weird behavior because React's virtual dom does not match the real dom. Such mismatches can happen when rendering based on information that is only available on the client side, but not on the server side, e.g. conditional rendering based on `typeof window !== 'undefined'`, or rendering based on data from `localStorage`. So this component will cause a hydration error if it is contained in the initial sever-rendered html (case 1), but it would not cause a hydration error if it only appeared later after hydration (case 2): ``` const MyComponent1 = () => { const [viewState, setViewState] = useState(() => getViewStateFromLocalStorage()) return <button onClick={() => setViewState(oldViewState => toggledViewState(oldViewState))>{viewState}</button> } ``` A common workaround is to use `useEffect` to apply client data only after hydration: ``` const MyComponent2 = () => { const [viewState, setViewState] = useState('A') useEffect(()=>{ setViewState(getViewStateFromLocalStorage()) },[]) return <button onClick={() => setViewState(oldViewState => toggledViewState(oldViewState))>{viewState}</button> } ``` This workaround comes with a downside: for case 2 where the component only appears later after hydration, it would still flash from showing `"A"` first, and then the view state from `localStorage`. To make the component directly show the view state from `localStorage`, the code in `MyComponent1` would need to be used, but then the component can not be used in initial server renderings. So the component itself needs knowledge in which contexts it will be used, which is not ideal for modularity. I cur…