CODEWITHSUNDEEP
javascriptreactjsstructurecomponentshierarchy
Kayote
Kayote

Reputation: 15617

Getting to Grips with Component Heirarchy in React

Im learning React and pondering over the structure of the components. The following has me confused a bit.

So, if my own whole app is one big component (owner) with lots of its responsibility (ownee) components, does that mean that that top level owner component will hold ALL the props and states. That would be a massive object.

As Im not initially using states, any changes to props would have to be passed to the 'owner' & then that component rendered again?

Clearly this is not right, right? Any guidance would be much appreciated.

Upvotes: 2

Views: 66

Answers (1)

hazardous
hazardous

Reputation: 10837

That interpretation is slightly off-mark. Your top level component doesn't need to be an all-knowing omniscient behemoth, simply because of the crucial difference between props and state. Any component is free to pick and control its own state, which it can pass down to its children. However, a prop for a component should not ideally be preserved in its state variable because that's what causes a duplicacy and violates the single source of truth paradigm. A prop is NOT owned by the component, it is owned by the ancestor which sent the prop down. On the contrary, it is natural and expected for a component to pass its state down as props to its children.

You will see that you can't do much without state, unless your app displays static content mostly. So when you start dealing with state, keep state where it belongs. Even with Flux there are ways to keep state relevant to the component to which it belongs.

Upvotes: 1

Related Questions