search

bbc / simorgh

The BBC's Open Source Web Application. Contributions welcome! Used on some of our biggest websites, e.g.
https://www.bbc.com/thai
Other
1.38k stars 214 forks source link

WSTEAMA-1216 - Fix unnecessary re-render when using Context Provider #11682

Closed louisearchibald closed 2 months ago

louisearchibald commented 2 months ago

Resolves JIRA [1216]

Overall changes

As outlined in this JIRA ticket, when previously upgrading to a newer version of eslint-config-airbnb, some errors relating to the re-rendering of components were highlighted in several different files.

This PR aims to implement the use of the React useMemo hook to prevent the unnecessary component re-renders, solving the errors, and improving performance as a result.

Code changes

We ended up having to do the same inside of these tests files below as well:

src/app/components/ChartbeatAnalytics/index.test.tsx src/app/components/Copyright/index.stories.tsx src/app/components/Embeds/OEmbed/index.test.tsx src/app/legacy/components/OptimoPromos/Content/index.test.jsx src/app/legacy/components/OptimoPromos/Link/index.test.jsx src/app/legacy/containers/BulletedList/index.test.jsx src/app/legacy/containers/ComscoreAnalytics/index.test.jsx src/app/legacy/containers/ConsentBanner/a11y.test.jsx src/app/legacy/containers/FauxHeadline/index.test.jsx src/app/legacy/containers/Headings/index.test.jsx src/app/legacy/containers/Include/index.test.jsx src/app/legacy/containers/InlineContainer/index.test.jsx src/app/legacy/containers/NielsenAnalytics/index.test.jsx src/app/legacy/containers/PageHandlers/withOptimizelyProvider/index.test.jsx src/app/legacy/containers/Paragraph/index.test.jsx src/app/legacy/containers/WebVitals/index.test.jsx src/app/pages/MediaArticlePage/PagePromoSections/LatestMediaSection/LatestMediaIndicator/index.test.tsx src/app/pages/MediaArticlePage/PagePromoSections/LatestMediaSection/LatestMediaItem/index.test.tsx

Testing

  1. Manually tested by running the yarn && yarn test:lint command before and after the hook was implemented in each component to check that the errors for each file had been resolved.

Helpful Links