furrary / react-fiber-demo

React Fiber Demo
https://furrary.github.io/react-fiber-demo/
MIT License
20 stars 3 forks source link

Add `Html.Lazy` to the top-level triangle. #2

Closed zwilias closed 6 years ago

zwilias commented 6 years ago

This saves re-rendering the entire triangle for every single frame, only requiring a full rerender when a node is "activated" or the text changes. Note that this could probably be used recursively too, to optimize the tree further down the line.

However, just adding it as a wrapper was the simplest change with a significant impact.

For comparison, a before-and-after:

image

Becomes...

image

furrary commented 6 years ago

It's a huge performance gain. Thanks a lot.