simorgh icon indicating copy to clipboard operation
simorgh copied to clipboard

Prevent unnecessary re-render when using Context.Provider

Open DarioR01 opened this issue 3 years ago • 0 comments

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:

  1. Checkout into renovate/eslint-config-airbnb-19.x git checkout renovate/eslint-config-airbnb-19.x
  2. Enter this index.js file
  3. See the error in line 56

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:

  1. checkout into renovate/eslint-config-airbnb-19.x with git checkout renovate/eslint-config-airbnb-19.x
  2. run yarn && yarn test:lint
  3. Locate all files with jsx-no-constructed-context-values error description output in the terminal

Alternatively

  1. Go to https://github.com/bbc/simorgh/runs/5754191013?check_suite_focus=true
  2. Locate all files with jsx-no-constructed-context-values error description

The lining library suggests the usage of the React hook use-memo, however as per documentation:

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on the next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance.

Testing notes

  • [ ] This bug fix is expected to need manual testing.

Checklist

DarioR01 avatar Mar 30 '22 13:03 DarioR01