Is this a good design for using React context API

Question

I am working on a React project which is divided into several modules and each module contains several components. There is also a commons module which contains components which are common to two or more separate modules. I am using context API for managing all the state. Below is the structure of the parent component(App.js). Module1Container , Module2Container ... contains components of respective modules.

return(
    <CommonsContextProvider>
        <Module1ContextProvider>
            <Module1Container />
        </Module1ContextProvider>
        <Module2ContextProvider>
            <Module2Container />
        </Module2ContextProvider>
        <Module3ContextProvider>
            <Module3Container />
        </Module3ContextProvider>
    </CommonsContextProvider>
)

I mainly want the states to be seperate as a single context for every module will make it too much cluttered. Is it a good idea to have a separate context for each module and a common context for commonly used state across modules? Don't this structure voids the single source of truth rule? Better suggestion is most welcome.

Answer 1

This method currently have no problem, but on the long run, if you need to maintain the project single source of truth is still better,

For single source of truth use redux (redux-hooks) and incase you need to have modular kinda of view of states use different reducers for different component and common reducer for global state,then combine them using combineReducer of redux