[elanning]

This is typically a good way to organize React projects, in my experience. A few top-level components which hold state with a useReducer and have a few functions to make backend calls, as needed. You could consider the reducer the model and the top-level component the controller. All components that sit below the top-level are pure view components. Props in, view out. They at most hold a minor amount of UI state. They don’t make API calls or update state themselves, that must be done with a callback to the top-level component.

This makes testing simple as you can test the reducer without rendering any UI. The pure view components are also easy to test. Then a few end to end tests to tie everything together.

https://www.reactguide.dev/#mc-v-trees Has more info on how to scale the pattern for larger apps.