ПостРодители и владельцы в React: провайдеры контекста

Родители и владельцы в React: провайдеры контекста Джулс Блом в своем блоге написала про то, что понимание того, как компоненты-родители (parent) и компоненты-владельцы (owner) влияют на обновление контекста, может помочь писать более производительные провайдеры контекста. Чтобы провайдеры контекста со стейтом были производительными, надо чтобы провайдер с логикой изменения стейта был отдельным компонентом и принимал children. Пример: function CounterProvider({ children }) { const [count, setCount] = useState(0); return ( <CounterContext.Provider value={count}> {children} </CounterContext.Provider> ); } function App() { return ( <CounterProvider> <CounterDisplay /> <UnrelatedComponent /> <Toolbar /> </CounterProvider> ) } Чтобы разобраться, почему провайдер контекста в этом примере производительный, сначала стоит разобраться что такое компоненты-родители и компоненты-владельцы: 🔴 компонент-родитель содержит дочерние компоненты и определяет структурные отношения (вложенность) между компонентами, например в App компонент CounterProvider является родителем для вложенных в него компонентов; 🔴 компонент-владелец рендерит другие компоненты и определяет функциональные отношения, вызывает рендеринг, например это компонент CounterProvider или App. Если вспомнить причины ре-рендеринга компонента, а это изменение стейта, обновление контекста и ре-рендер компонента-владельца, то становится понятно почему провайдер контекста стал производительнее. В CounterProvider логика со стейтом и при ее изменении будет происходить ре-рендер компонента CounterProvider и компонентов, которые подписаны на изменения контекста. При этом, компонент App не будет ре-рендерится, т.к. в нем нет изменений стейта. https://julesblom.com/writing/parent-owners-context