Complete the partial memoization of provider (#427)

* Make onInsetsChange more referentially stable It should only change reference if setFrame or setInsets change, which should be never. Related: #426 * Make style passed to provider stable Related: #426 * Memoize provider Related: #426 * Only add displayName to provider if in dev env * Revert "Only add displayName to provider if in dev env" This reverts commit 23fc49e. * Revert "Memoize provider" This reverts commit 8f34f22. * Move to StyleSheet.compose Related: #426 * Remove stable references from onInsetsChange deps * Update snapshot tests
th3rdwave · Sep 1, 2023 · c862c86 · c862c86
1 parent 930f703
commit c862c86
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 89 deletions.
diff --git a/src/SafeAreaContext.tsx b/src/SafeAreaContext.tsx
@@ -53,12 +53,12 @@ export function SafeAreaProvider({
         height: Dimensions.get('window').height,
       },
   );
-  const onInsetsChange = React.useCallback(
-    (event: InsetChangedEvent) => {
-      const {
-        nativeEvent: { frame: nextFrame, insets: nextInsets },
-      } = event;
+  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
+    const {
+      nativeEvent: { frame: nextFrame, insets: nextInsets },
+    } = event;
 
+    setFrame((frame) => {
       if (
         // Backwards compat with old native code that won't send frame.
         nextFrame &&
@@ -67,25 +67,30 @@ export function SafeAreaProvider({
           nextFrame.x !== frame.x ||
           nextFrame.y !== frame.y)
       ) {
-        setFrame(nextFrame);
+        return nextFrame;
+      } else {
+        return frame;
       }
+    });
 
+    setInsets((insets) => {
       if (
         !insets ||
         nextInsets.bottom !== insets.bottom ||
         nextInsets.left !== insets.left ||
         nextInsets.right !== insets.right ||
         nextInsets.top !== insets.top
       ) {
-        setInsets(nextInsets);
+        return nextInsets;
+      } else {
+        return insets;
       }
-    },
-    [frame, insets],
-  );
+    });
+  }, []);
 
   return (
     <NativeSafeAreaProvider
-      style={[styles.fill, style]}
+      style={StyleSheet.compose(styles.fill, style)}
       onInsetsChange={onInsetsChange}
       {...others}
     >

diff --git a/src/__tests__/__snapshots__/SafeAreaContext-test.tsx.snap b/src/__tests__/__snapshots__/SafeAreaContext-test.tsx.snap
@@ -4,12 +4,9 @@ exports[`SafeAreaContext does not render child until inset values are received 1
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 />
 `;
@@ -18,12 +15,9 @@ exports[`SafeAreaContext renders 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 />
 `;
@@ -32,12 +26,9 @@ exports[`SafeAreaContext renders child when inset values are received 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 />
 `;
@@ -46,12 +37,9 @@ exports[`SafeAreaContext renders child when inset values are received 2`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
@@ -75,12 +63,9 @@ exports[`SafeAreaContext supports setting initial insets 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
@@ -104,23 +89,17 @@ exports[`SafeAreaContext uses inner insets 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaProvider
     onInsetsChange={[Function]}
     style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
+      {
+        "flex": 1,
+      }
     }
   >
     <View
@@ -145,23 +124,17 @@ exports[`SafeAreaContext uses parent insets when available 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaProvider
     onInsetsChange={[Function]}
     style={
-      [
-        {
-          "flex": 1,
-        },
-        undefined,
-      ]
+      {
+        "flex": 1,
+      }
     }
   >
     <View

diff --git a/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap b/src/__tests__/__snapshots__/SafeAreaView-test.tsx.snap
@@ -4,12 +4,9 @@ exports[`SafeAreaView can override padding styles 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaView
@@ -36,12 +33,9 @@ exports[`SafeAreaView can set edges 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaView
@@ -63,12 +57,9 @@ exports[`SafeAreaView can set edges value type 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaView
@@ -96,12 +87,9 @@ exports[`SafeAreaView renders 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <RNCSafeAreaView