react-ssr-error-boundary icon indicating copy to clipboard operation
react-ssr-error-boundary copied to clipboard

This package is unsafe to use

Open wereHamster opened this issue 4 years ago • 1 comments

The component renders a different markup on the server vs on the client. This causes issues, such as those described by https://github.com/reactjs/reactjs.org/issues/25.

If you are lucky then react will patch the differences. If you are not so lucky then the differences will remain and cause issues. For example if the server renders <div className="foo"> and the client renders <div className="bar">, then the difference in the className prop will not be patched up and the element will be styled incorrectly.

wereHamster avatar Jul 01 '20 06:07 wereHamster

It's actually worse than that. If you hydrate the dom and there are elements that React can't match to a virtual DOM node, it won't remove them from the DOM unless it re-renders their parent. Instead you get zombie nodes which React won't remove, won't re-render, and won't connect to event handlers. The rest of the page works and is interactive, but those zombie nodes remain.

mnebuerquo avatar Jul 01 '20 09:07 mnebuerquo