Giters

bbc / simorgh

The BBC's Open Source Web Application. Contributions welcome! Used on some of our biggest websites, e.g.

Home Page:https://www.bbc.com/thai

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Prevent unnecessary re-render when using Context.Provider

DarioR01 opened this issue · comments

commented

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