Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) Managing State and Data Flow Lifting State Up

Sharon Hartsell
Sharon Hartsell
4,403 Points

App Architecture Design - Standalone Components vs Lifting State Up

I understand that lifting the score state up from <Counter /> to the overall app was necessary so that other components can access it. However, I thought building reusable components was a key benefit of React. Since the Counter component no longer manages its own score, we couldn't easily plug it into another app, unless we continued to pass it the score.

From an architecture standpoint, when should a component be self-contained vs when should state be lifted up? It seems like most of my apps wind up with nearly all the state in <App />.

1 Answer

Mark Westerweel
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mark Westerweel
Full Stack JavaScript Techdegree Graduate 22,378 Points

Good question! We will get there in a later course, I presume. You can do that with React Hooks and Redux.

Well, if any module needs access to the top-level component, then yes, the state would end up in <App />.

In the case of a score counter or anything where we instance out from the top-level, all that state would resides there. In simple applications, it doesn't matter much.

Only when we NEED state on a local level and build a very simple app, would it reside locally, to make sure it can't interfere with upper data-flow and only passed DOWN