Я использую React Hooks для управления состоянием, краткий обзор:
Я использую useContext ловушку, чтобы распределить состояние приложения по внутренним компонентам. Эти контексты предоставляют объект типа: { state, dispatch }, который возвращается из useReducer ловушки.
const [ state, dispatch ] = useReducer({...}, initialState);
return (
<MyContext.Provider value={{state, dispatch}}>
{children}
</MyContext.Provider>
);
Тогда состояние доступно внутренним компонентам:
<MyContext>
<SomeComponent/>
</MyContext>
Как приложение растет, будет несколько контекстов, подобных этому, поэтому я испытываю желание создать еще один компонент с именем Store, и просто помещаю туда все контексты, оборачивая мое приложение:
Store.jsx:
export const Store = ({children}) => (
<SomeContext>
<AnotherContext>
{children}
</AnotherContext>
</SomeContext>
)
Приложение · jsx:
<Store>
<App/>
</Store>
Теперь актуальный вопрос: Может ли такой подход вызвать ненужные повторные рендеринг? И какое влияние это может оказать на производительность в долгосрочной перспективе?