You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
The text was updated successfully, but these errors were encountered:
SanjalKatiyar
changed the title
[perf-improv] create separate provider for the context and pass its descendants as a "children"
[perf-improv] Create separate provider for the context and pass its descendants as a "children"
Feb 26, 2024
Currently used:
https://github.com/red-hat-storage/odf-console/blob/master/packages/odf/components/topology/Topology.tsx#L502
https://github.com/red-hat-storage/odf-console/blob/master/packages/mco/components/mco-dashboard/data-policy/dr-dashboard.tsx#L163
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
The text was updated successfully, but these errors were encountered: