1

I'm rendering a bit of html in the browser with renderToString because I need to extend some static html that's imported. Not very elegant, but has to be done.

I'm using redux with a provider and the components use useSelector

renderToString(<Provider store={store}><SomeComponent/></Provider>);

The issue is always get the warning

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

Which I understand, but I'm not on the server. Somehow react thinks I'm on the server eventhough I'm not.

Redux fixes this usually by replacing useLayoutEffect with useEffect but only when window is not given, but since I'm in the browser it is given.

How do I avoid this warning? Can I overwrite useLayoutEffect somehow temporarily? It's imported by redux somewhere when using useSelector() so I doubt that's a feasible option, because other pieces of code should still use the normal useLayoutEffect, just not this part that's rendered with renderToString()

gempir
  • 1,791
  • 4
  • 22
  • 46
  • This seems to be a really strange thing to do. If anything it would probably be better and easier to render the static html with react too and maybe use portals to inject some react components at certain places. `renderToString` is intended to be used on the server, that's why it is in the `react-dom/server` package. What is redux any good for if it only renders static html a single time? – trixn Apr 30 '21 at 09:23
  • Well we abuse redux as a just a way of accessing the store from everywhere. So you can easily get config variables from the store in every subcomponent. Kinda like react context I guess, because the rest of the codebase uses it like that it would make sense to use redux like this here aswell. According to this answer it should be fine to use in the browser. https://stackoverflow.com/a/48565807/3648229 The portals options is kind of hard to do, because we replace html comments inside the static HTML and only the comments are guaranteed to be stable. – gempir Apr 30 '21 at 09:41
  • I think it would be helpful to know at least a little bit of background information about the original problem that should be solved by using `renderToString`. Where does the "imported" html come from, what kind if content/markup does it contain and what is the resulting html of `renderToString` supposed to be used for? – trixn Apr 30 '21 at 09:47
  • It's third party html. But they provide some html comments to know where you can insert some of your own custom html. For example to add a Telephone-number or so something. In the end the entire html is then displayed as part of the react application. – gempir Apr 30 '21 at 09:57

0 Answers0