Merge pull request #626 from vtex-apps/fix/device-rerender

Fix/device rerender

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Prevents unnecessary rerender on `withDevice` HOC.
 
 ## [8.132.1] - 2021-09-28
 ### Changed

react/utils/withDevice.tsx

@@ -29,6 +29,7 @@ const useDevice = (hints: RenderRuntime['hints']) => {
   /** These screensizes are hardcoded, based on the default
    * Tachyons breakpoints. They should probably be the ones
    * configured via the style.json file, if available. */
+
   const isScreenMedium = useMediaLayout({ minWidth: '40rem' })
   const isScreenLarge = useMediaLayout({ minWidth: '64.1rem' })
 
@@ -56,11 +57,25 @@ const useDevice = (hints: RenderRuntime['hints']) => {
 export const withDevice = <P extends Props>(
   Component: ComponentType<P & WithDeviceProps>
 ): FC<P> => {
+  const MemoizedWithDevice = React.memo(
+    ({ type, isMobile, ...props }: DeviceInfo & Props) => (
+      <Component deviceInfo={{ type, isMobile }} {...(props as P)} />
+    )
+  )
+
+  MemoizedWithDevice.displayName = 'MemoizedWithDevice'
+
   const WithDevice = ({ ...props }: P) => {
     const hints = props.runtime.hints
     const deviceInfo = useDevice(hints)
 
-    return <Component deviceInfo={deviceInfo} {...(props as P)} />
+    return (
+      <MemoizedWithDevice
+        type={deviceInfo.type}
+        isMobile={deviceInfo.isMobile}
+        {...props}
+      />
+    )
   }
 
   return WithDevice