search

jamiebuilds / unstated-next

200 bytes to never think about React state management libraries ever again
MIT License
4.18k stars 145 forks source link

[Question] How does splitting the component apart optimize performance #52

Open fi3ework opened 5 years ago

fi3ework commented 5 years ago

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 commented 5 years ago

Read this:

https://github.com/facebook/react/issues/15156

fi3ework commented 5 years ago

@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 commented 5 years ago

I'm working on a solution for splitting the hook into multiple contexts here: https://github.com/diegohaz/constate/issues/93#issuecomment-540905737

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