Prevent unnecessary re-render when using Context.Provider #10003
Labels
bug
Something isn't working
performance
technical-work
Technical debt, support work and building new technical tools and features
Describe the bug
After a discussion about the introduction of jsx-no-constructed-context-values we classified this as a performance bug.
According to the above source, we should not use non-stable values (i.e. object identities) from being used as a value for
Context.Provider
, because this causes unnecessary re-render of the component.To Reproduce
Steps to reproduce the behaviour:
The above occurs in the following files:
src/app/components/Promo/index.jsx
src/app/contexts/EventTrackingContext/index.jsx
src/app/contexts/RequestContext/index.jsx
src/app/contexts/ToggleContext/index.jsx
src/app/containers/EpisodeList/index.jsx
src/app/containers/PodcastPromo/components/index.jsx
src/app/containers/RadioSchedule/utilities/testHelpers.jsx
src/app/contexts/UserContext/index.jsx
To better visualise this error:
git checkout renovate/eslint-config-airbnb-19.x
Expected behaviour
should not cause unnecessary re-render.
Additional context
We also use the above in unit
.test
and.stories
files which I have not listed above.To visualise the full list of files which have the above bug:
git checkout renovate/eslint-config-airbnb-19.x
yarn && yarn test:lint
Alternatively
The lining library suggests the usage of the React hook use-memo, however as per documentation:
Testing notes
Checklist
The text was updated successfully, but these errors were encountered: