JavaScript React Components Managing State and Data Flow Lifting State Up

Sharon Hartsell
Sharon Hartsell
2,565 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 />.