search

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.
https://polaris.shopify.com
Other
5.77k stars 1.17k forks source link

React.memo not working on functional components containing Polaris elements #3680

Closed nikhilplusbooster closed 1 year ago

nikhilplusbooster commented 3 years ago

Issue summary

Polaris elements like Layout, Card, Banner get re-rendered every time any element is changed within the App Provider of a functional component. I've tried memoizing these elements by separating them into separating components but can't get them to stop re-rendering, when no change is made to the props of the component.

Expected behavior

I expect the Polaris elements to stop re-rendering like regular elements, when memoized. How can I achieve that?

Reduced test case

https://codesandbox.io/s/shopify-polaris-react-typescript-playground-forked-kh16z?file=/src/index.tsx

In the above code, the elements inside GetText component will get re-rendered even when the input inside it is not changed.

Specifications

Paste the results here: Flamegraph CC

The flamegraph above shows how all the Polaris elements are re-rendering even when they are memoized with React.memo in a different component.

ghost commented 3 years ago

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

github-actions[bot] commented 1 year ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's design system and dev experience.