React "lifting state up" philosophie : How to avoid ending up with one big parent component containing all the code?

Question

This is not a very precise question. I think I understand the "react lifting state up" paradigm. As far as I know, this is the only clean way for two sibling components to have access to their respective properties.

But doing so, I end up with one tremendous class containing everything : the data information for the properties of all of its child components, and all the functions in charge of updating this information (in charge of calling setState). I'm unhappy with the fact that I'm not able anymore to dispatch into sub-components, the work that has to do with them.

My question is : how to avoid the concentration of all the code in parent components, using react, while keeping the nice clean state/prop mechanism ? Or am I wrong to complain maybe ?

Answer 1

Many people believe jumping directly into redux would be a good idea, but in fact, it comes with lots of computational overhead and boilerplate code.

As a rule of thumb, you would simply move logic up the tree which is relevant not only for child components but also for siblings.

You should also have a look at the concept of Presentational and Container Components.