Update React-Native example app

examples/publish-ci/react-native/App.test.tsx

@@ -1,4 +1,10 @@
+import type { Action, Dispatch } from "@reduxjs/toolkit"
+import { configureStore } from "@reduxjs/toolkit"
 import { screen, waitFor } from "@testing-library/react-native"
+import { Component, PureComponent, type PropsWithChildren } from "react"
+import type { TextStyle } from "react-native"
+import { Button, Text, View } from "react-native"
+import { connect, Provider } from "react-redux"
 import { App } from "./App"
 import { renderWithProviders } from "./src/utils/test-utils"
 
@@ -103,3 +109,207 @@ test("Add If Odd should work as expected", async () => {
   await user.press(screen.getByText("Add If Odd"))
   expect(screen.getByLabelText("Count")).toHaveTextContent("4")
 })
+
+test("React-Redux issue #2150: Nested component updates should be properly batched when using connect", async () => {
+  // Original Issue: https://github.com/reduxjs/react-redux/issues/2150
+  // Solution: https://github.com/reduxjs/react-redux/pull/2156
+
+  // Actions
+  const ADD = "ADD"
+  const DATE = "DATE"
+
+  // Action types
+  interface AddAction extends Action<string> {}
+  interface DateAction extends Action<string> {
+    payload?: { date: number }
+  }
+
+  // Reducer states
+  interface DateState {
+    date: number | null
+  }
+
+  interface CounterState {
+    count: number
+  }
+
+  // Reducers
+  const dateReducer = (
+    state: DateState = { date: null },
+    action: DateAction,
+  ) => {
+    switch (action.type) {
+      case DATE:
+        return {
+          ...state,
+          date: action.payload?.date ?? null,
+        }
+      default:
+        return state
+    }
+  }
+
+  const counterReducer = (
+    state: CounterState = { count: 0 },
+    action: AddAction,
+  ) => {
+    switch (action.type) {
+      case ADD:
+        return {
+          ...state,
+          count: state.count + 1,
+        }
+      default:
+        return state
+    }
+  }
+
+  // Store
+  const store = configureStore({
+    reducer: {
+      counter: counterReducer,
+      dates: dateReducer,
+    },
+  })
+
+  // ======== COMPONENTS =========
+  interface CounterProps {
+    count?: number
+    date?: number | null
+    dispatch: Dispatch<AddAction | DateAction>
+    testID?: string
+  }
+
+  class CounterRaw extends PureComponent<CounterProps> {
+    handleIncrement = () => {
+      this.props.dispatch({ type: ADD })
+    }
+
+    handleDate = () => {
+      this.props.dispatch({ type: DATE, payload: { date: Date.now() } })
+    }
+
+    render() {
+      return (
+        <View style={{ paddingVertical: 20 }}>
+          <Text testID={`${this.props.testID}-child`}>
+            Counter Value: {this.props.count}
+          </Text>
+          <Text>date Value: {this.props.date}</Text>
+        </View>
+      )
+    }
+  }
+
+  class ButtonsRaw extends PureComponent<CounterProps> {
+    handleIncrement = () => {
+      this.props.dispatch({ type: ADD })
+    }
+
+    handleDate = () => {
+      this.props.dispatch({ type: DATE, payload: { date: Date.now() } })
+    }
+
+    render() {
+      return (
+        <View>
+          <Button title="Update Date" onPress={this.handleDate} />
+          <View style={{ height: 20 }} />
+          <Button title="Increment Counter" onPress={this.handleIncrement} />
+        </View>
+      )
+    }
+  }
+
+  const mapStateToProps = (state: {
+    counter: CounterState
+    dates: DateState
+  }) => {
+    return { count: state.counter.count, date: state.dates.date }
+  }
+
+  const mapDispatchToProps = (dispatch: Dispatch<AddAction | DateAction>) => ({
+    dispatch,
+  })
+
+  const Buttons = connect(null, mapDispatchToProps)(ButtonsRaw)
+  const Counter = connect(mapStateToProps, mapDispatchToProps)(CounterRaw)
+
+  class Container extends PureComponent<PropsWithChildren> {
+    render() {
+      return this.props.children
+    }
+  }
+
+  const mapStateToPropsBreaking = (_state: any) => ({})
+
+  const ContainerBad = connect(mapStateToPropsBreaking, null)(Container)
+
+  const mapStateToPropsNonBlocking1 = (state: { counter: CounterState }) => ({
+    count: state.counter.count,
+  })
+
+  const ContainerNonBlocking1 = connect(
+    mapStateToPropsNonBlocking1,
+    null,
+  )(Container)
+
+  const mapStateToPropsNonBlocking2 = (state: any) => ({ state })
+
+  const ContainerNonBlocking2 = connect(
+    mapStateToPropsNonBlocking2,
+    null,
+  )(Container)
+
+  class MainApp extends Component {
+    render() {
+      const $H1: TextStyle = { fontSize: 20 }
+      return (
+        <Provider store={store}>
+          <Buttons />
+          <Text style={$H1}>=Expected=</Text>
+          <View>
+            <Text>
+              I don't have a parent blocking state updates so I should behave as
+              expected
+            </Text>
+            <Counter />
+          </View>
+
+          <Text style={$H1}>=Undesired behavior with react-redux 9.x=</Text>
+          <ContainerBad>
+            <Text>All redux state updates blocked</Text>
+            <Counter testID="undesired" />
+          </ContainerBad>
+
+          <Text style={$H1}>=Partially working in 9.x=</Text>
+          <ContainerNonBlocking1>
+            <Text>
+              I'm inconsistent, if date updates first I don't see it, but once
+              count updates I rerender with count or date changes
+            </Text>
+            <Counter testID="inconsistent" />
+          </ContainerNonBlocking1>
+
+          <Text style={$H1}>=Poor workaround for 9.x?=</Text>
+          <ContainerNonBlocking2>
+            <Text>I see all state changes</Text>
+            <Counter />
+          </ContainerNonBlocking2>
+        </Provider>
+      )
+    }
+  }
+
+  const { user, getByTestId, getByText } = renderWithProviders(<MainApp />)
+
+  expect(getByTestId("undesired-child")).toHaveTextContent("Counter Value: 0")
+
+  await user.press(getByText("Increment Counter"))
+
+  expect(getByTestId("inconsistent-child")).toHaveTextContent(
+    "Counter Value: 1",
+  )
+
+  expect(getByTestId("undesired-child")).toHaveTextContent("Counter Value: 1")
+})

examples/publish-ci/react-native/babel.config.js

@@ -0,0 +1,14 @@
+/** @import { ConfigFunction } from "@babel/core" */
+
+/**
+ * @satisfies {ConfigFunction}
+ */
+const config = api => {
+  api.cache.using(() => process.env.NODE_ENV)
+
+  return {
+    presets: [["module:@react-native/babel-preset"]],
+  }
+}
+
+module.exports = config

examples/publish-ci/react-native/jest.config.ts

@@ -2,7 +2,26 @@ import type { Config } from "jest"
 
 const config: Config = {
   preset: "react-native",
-  testEnvironment: "node",
+  verbose: true,
+  /**
+   * Without this we will get the following error:
+   * `SyntaxError: Cannot use import statement outside a module`
+   */
+  transformIgnorePatterns: [
+    "node_modules/(?!((jest-)?react-native|...|react-redux))",
+  ],
+  /**
+   * React Native's `jest` preset includes a
+   * [polyfill for `window`](https://github.com/facebook/react-native/blob/acb634bc9662c1103bc7c8ca83cfdc62516d0060/packages/react-native/jest/setup.js#L61-L66).
+   * This polyfill causes React-Redux to use `useEffect`
+   * instead of `useLayoutEffect` for the `useIsomorphicLayoutEffect` hook.
+   * As a result, nested component updates may not be properly batched
+   * when using the `connect` API, leading to potential issues.
+   */
+  globals: {
+    window: undefined,
+    navigator: { product: "ReactNative" },
+  },
   setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"],
   fakeTimers: { enableGlobally: true },
 }

examples/publish-ci/react-native/package.json

@@ -14,34 +14,38 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^2.0.1",
+    "@reduxjs/toolkit": "^2.2.7",
     "react": "18.2.0",
-    "react-native": "^0.73.2",
-    "react-redux": "^9.1.0"
+    "react-native": "^0.74.5",
+    "react-redux": "^9.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
-    "@babel/runtime": "^7.23.8",
-    "@react-native/babel-preset": "^0.73.19",
-    "@react-native/eslint-config": "^0.74.0",
-    "@react-native/metro-config": "^0.73.3",
-    "@react-native/typescript-config": "^0.74.0",
-    "@testing-library/react-native": "^12.4.3",
-    "@types/jest": "^29.5.11",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-typescript": "^7.24.7",
+    "@babel/runtime": "^7.25.0",
+    "@react-native/babel-preset": "^0.74.87",
+    "@react-native/eslint-config": "^0.74.87",
+    "@react-native/metro-config": "^0.74.87",
+    "@react-native/typescript-config": "^0.74.87",
+    "@testing-library/react-native": "^12.5.2",
+    "@types/babel__core": "^7.20.5",
+    "@types/eslint": "^9",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.2.47",
     "@types/react-test-renderer": "^18.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^8.0.1",
+    "@typescript-eslint/parser": "^8.0.1",
     "babel-jest": "^29.7.0",
-    "eslint": "^8.56.0",
+    "eslint": "^9.8.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "react-test-renderer": "18.2.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.4"
   },
   "engines": {
     "node": ">=18"