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.
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.