red-hat-storage / odf-console

UI Plugin for ODF Operator.
Apache License 2.0
3 stars 28 forks source link

[perf-improv] Create separate provider for the context and pass its descendants as a "children" #672

Open SanjalKatiyar opened 1 year ago

SanjalKatiyar commented 1 year ago

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

SanjalKatiyar commented 1 year ago

cc @bipuladh @GowthamShanmugam (just FYI)

black-dragon74 commented 1 year ago

@SanjalKatiyar can I take this one?

SanjalKatiyar commented 1 year ago

@SanjalKatiyar can I take this one?

/assign @debjyoti-pandit Hi, this is already assigned (forgot to update the issue) and WIP.