facebook / react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.
https://facebook.github.io/react-strict-dom
MIT License
3.19k stars 161 forks source link

Optimized Fast Path For re-renders of divs with unchanged contexts #190

Closed rhagigi closed 3 months ago

rhagigi commented 3 months ago

If I'm not missing anything, any time any RSD div re-renders for any reaason, all RSD components below it will re-render, no matter what, because this context always changes. This adds a fast path so that at the very least, this will now only happen when you re-render a div that actually does include any new inheritable styles.

It also adds a tiny bit of a bail out (no need to object.assign to a new object) if the new inheritable styles are added to a div that has no parent inherited styles (so the parent is using the default context value, which now will get transferred down thanks to the first if). But it'll still be a new object there, because a new object will be created for "value" every time.

The way to fix this properly would be to actually do some kind of proper memoization of this value - but this hack is quick and dirty and most of the time won't result in re-rendering the entire subtree of RSD components, so I'll take it for now.

Will see if I can add tests in the morning but wanted to get this out there first to take a look at as it should be fairly self explanatory.

necolas commented 3 months ago

When it comes to testing that this avoids re-mounts, we could add a new test below this one that checks a child is the same on both sides of a react update https://github.com/facebook/react-strict-dom/blob/main/packages/react-strict-dom/tests/html-test.native.js#L190

necolas commented 3 months ago

Applied by #191