[react]container Component Design

I have 3 components in a html page. A,B,C By the PSD desgin ,in the DOM level , A includes B and B includes C. so in the React level , I'd like to design component tree as follow:

Solution 1:

Some times you can learn more my reading example code, take a look at this example Todo List provided by redux it clearly shows that MainSection contains TodoItem and a Footer both of which are stateful and MainSection itself is stateful. A major example may even be the Material-UI library which is all stateful components and you can use it with stateless or stateful components.

There is no reason stateless components can't contain state-less components and there is no reason stateless components can't contain stateful components. An example of a stateless component containing stateful components is literally your top level App or index file at times. If the repo linked above, take a look at App.js.

The main concern with stateful components containing stateful components is a lot of needless updates to your UI. These are some times not obvious because the shadow DOM diff's against the DOM and makes the appropriate changes, but there is non-the-less a cost to the diff and the operation is triggered every time your state changes.

A good way to solve this issue is to keep your components fairly flat in their dept or to implement the shouldComponentUpdate function as needed.

Having state in your components just makes things easier to manage due to separation of concerns, so I find it hard to believe using them under stateful or stateless components could be an issue. Stateless components will render every time the component that contains them renders, so perhaps the issue of embedding stateless components inside stateless components is one of depth, i.e. the deeper your DOM the more complex the diff operations (purely guessing based on experience) so the guideline discourage this so that you can keep your tree as flat as possible.

Honestly, I don't see any of this being a problem as long as you use good coding practices and are aware of the consequences of your decisions.