fix(rerender): allow for multiple Rerender components to update in tree

release-npm

index.ts

@@ -80,7 +80,9 @@ const app = {
   rerender: () => {
     updateBreakpoint()
     app.listener.forEach((listener) => listener())
+    app.rerenderComponents.forEach((update) => update())
   },
+  rerenderComponents: [] as Function[],
   // Calculates a scaled value.
   value: linearScale,
   // Updates the current breakpoint depending on window width.
@@ -219,13 +221,7 @@ export const Rerender = ({
   style?: StyleProp<ViewStyle> | StyleProp<ViewStyle>[]
 }) => {
   const [count, setCount] = useState(0)
-
-  app.rerender = () => {
-    updateBreakpoint()
-    app.listener.forEach((listener) => listener())
-    setCount(count + 1)
-  }
-
+  app.rerenderComponents.push(() => setCount(count + 1))
   return createElement(View, { style, key: count, children: children() })
 }
 

package.json

@@ -43,14 +43,14 @@
     "flexbox"
   ],
   "devDependencies": {
-    "@react-native-community/cli": "^12.3.2",
+    "@react-native-community/cli": "^12.3.3",
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/eslint-config": "^0.74.0",
     "@react-native/typescript-config": "^0.74.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.4.3",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.11.2",
+    "@types/node": "^20.11.4",
     "@types/react": "^18.2.48",
     "@types/react-native": "^0.72.8",
     "@types/react-test-renderer": "^18.0.7",

test/basic.test.tsx

@@ -632,3 +632,26 @@ test('MobX observer components will also be rerendered.', () => {
   expect(regularRenders).toBe(2)
   expect(observedRenders).toBe(2)
 })
+
+test('Multiple Rerender components can be placed in the React tree.', () => {
+  let renders = 0
+  const RegularComponent = () => {
+    renders += 1
+    return <View accessibilityLabel="regular" style={styles.wrapper} />
+  }
+  render(
+    <>
+      <Rerender>{() => <RegularComponent />}</Rerender>
+      <Rerender>{() => <RegularComponent />}</Rerender>
+      <Rerender>{() => <RegularComponent />}</Rerender>
+    </>,
+  )
+
+  expect(renders).toBe(3)
+
+  act(() => {
+    rerender()
+  })
+
+  expect(renders).toBe(6)
+})