search

zekchan / react-ssr-error-boundary

34 stars 14 forks source link

This package is unsafe to use #10

Open wereHamster opened 4 years ago

wereHamster commented 4 years ago

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.

mnebuerquo commented 4 years ago

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.