How to fix the 'Warning: useLayoutEffect does nothing on the server', when using reactDOMServer.renderToString()?

157 Views Asked by At

Using React 17, and MaterialUIv5, with the following code:

const htmlString = reactDOMServer.renderToString(MyReactComponent)

I get the following error in the console:

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 fb.me/react-uselayouteffect-ssr for common fixes.

I need to convert the React Component into a string to pass into a function as a tooltip, is there a better way to do this than to use reactDOMServer.renderToString or reactDOMServer.renderToStaticMarkup?

0

There are 0 best solutions below