Refer: https://reactjs.org/docs/context.html#contextproviderAll consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes.
Whenever Provider’s value prop changes all the child FCs will get re-rendered (irrespective of whether a child is a consumer of the context or not). This will cause unnecessary re-renders for those FCs which are not consuming any state from the context.
To avoid that use composition: create a separate FC which will provide the context and pass the consumer FCs as its "children".
example: https://github.com/openshift/console/blob/master/frontend/public/components/app.jsx#L241
Currently used: https://github.com/red-hat-storage/odf-console/blob/master/packages/odf/components/topology/Topology.tsx#L575 https://github.com/red-hat-storage/odf-console/blob/master/packages/mco/components/mco-dashboard/disaster-recovery/dr-dashboard.tsx#L128
Refer: https://reactjs.org/docs/context.html#contextprovider All consumers that are descendants of a Provider will re-render whenever the Provider’s value prop changes. Whenever Provider’s value prop changes all the child FCs will get re-rendered (irrespective of whether a child is a consumer of the context or not). This will cause unnecessary re-renders for those FCs which are not consuming any state from the context. To avoid that use composition: create a separate FC which will provide the context and pass the consumer FCs as its "children". example: https://github.com/openshift/console/blob/master/frontend/public/components/app.jsx#L241