[Question] How does splitting the component apart optimize performance

[fi3ework]

In README there's a performance optimization method

1. Optimizing expensive sub-trees by splitting the component apart

I don't quite understand how it optimize performance. IMO, the separated component render as much times as before separating and I made a small demo: https://codesandbox.io/s/dark-http-selxh. The ExpensiveComponent will console as long as parent component's useContainer value changed.

Could anybody tell me about the correct understanding of it? 🤔

[AjaxSolutions]

Read this:

facebook/react#15156

[fi3ework]

@AjaxSolutions
Thanks for replying. I checked Dan's three suggestions provided. I guess the

Option 1 (Preferred): Split contexts that don't change together

is corresponding to the method I mentioned? So the key point is to separating the context to avoid re-render triggered by unrelated context value?

But the README in unstated-next, it seems like telling us separate the component which will be render but not the composite context.

[diegohaz]

I'm working on a solution for splitting the hook into multiple contexts here: diegohaz/constate#93 (comment)

Leaving it here because it may serve as a reference for a future work on unstated-next, but I'd love a feedback on that API too! :)

cc @jamiebuilds