Too much state at the top? (beginner question)

(JW) #1

I’m learning React by creating a multi-tabbed app, which uses React Router 4. I want each tab to maintain its contents even when you switch away, similar to the iOS App Store.

Since the router removes a component when it’s not in the current route, I can’t store any state in my tab components, or it will get lost when you switch away. So, having taken Thinking in React to heart, I’ve pretty much moved all my state up to the top-level App component.

But as a result, my App component is way too complex. For example, each tab loads some data over the net. So for each tab, my App component has state fields for the data, the loading/loaded state of the data, its sort direction/order, its filters, etc. Plus it’s got event-handler functions to load, sort, filter, add, update, and delete data, which it passes down to the lower-level components within the tab.

Is this a common problem? How do I simplify things? I’ve avoided adding Redux because of articles like this, and since this seems like a pretty simple app. Any advice would be appreciated…let me know if this isn’t the appropriate forum.

(Joe Dodd) #2

It might help to see just how complex your App component is via your code. From what you’ve described, it doesn’t sound too complex to me. But others may have different opinions.