Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent unnecessary re-render when using Context.Provider #10003

Open
2 tasks
DarioR01 opened this issue Mar 30, 2022 · 0 comments
Open
2 tasks

Prevent unnecessary re-render when using Context.Provider #10003

DarioR01 opened this issue Mar 30, 2022 · 0 comments
Labels
bug Something isn't working performance technical-work Technical debt, support work and building new technical tools and features

Comments

@DarioR01
Copy link
Contributor

DarioR01 commented Mar 30, 2022

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 DarioR01 added bug Something isn't working performance technical-work Technical debt, support work and building new technical tools and features labels Mar 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working performance technical-work Technical debt, support work and building new technical tools and features
Projects
None yet
Development

No branches or pull requests

1 participant