Does re-render really matter? Does Class component perform better than functional?

(Davíð Þórisson) #1

In apps we need a common state (store) and a way for components to communicate each with other. This has traditionally be solved using flux libraries eg Redux but with introduction of Context it is now much easier to write this part on your own (and I recommend doing that, it teaches you a lot about React inner workings!).

It doesn’t matter if Context or props drilling is used - there is no way to prevent a re-render when a functional component receives an action (type/payload). It needs custom logic (in lifecycle events) to know if action applies or not. For example, action of type “refresh page” doesn’t apply to “user profile” component.

This comes down to a fundamental question, does the re-render really matter for a child component? Since it leads to no action drawing real resources (e.g. data fetching or changes in DOM) - isn’t this pattern acceptable - normal even?

It would be totally different if there were hundreds of receiving components so the question then is - does a class with lifecycle events where re-render can be cancelled bring better performance than pure/functional component?

(Peter Bengtsson) #2

If it re-renders without any of the parameters actually changing, doesn’t that feel like a “failure”?

It’s different when performance matters less that delivering a working solution but generally I try to avoid re-rendering at all cost. Not because it’s CPU expensive but because there’s just something wrong about it.
Perhaps the child components shouldn’t rely on props too much from a parent but instead handle their one state.

MobX solves this by you making both parent and child components observables.

(Davíð Þórisson) #3

Absolutely agree, it is a design failure more than performance issue! I decided to move actions altogether into Apollo cache but as by design it changes props I still have to check if action is to be handled in component or not and cancel re-render if not.

Do you know if this can somehow be made observable?