feat: support for React 19 (#6520)

* feat: support for React 19

---------

Co-authored-by: Haroen Viaene <[email protected]>

examples/react/default-theme/package.json

@@ -10,15 +10,15 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "instantsearch.js": "4.75.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10"
   },
   "devDependencies": {
     "@parcel/core": "2.10.0",
     "@parcel/packager-raw-url": "2.10.0",
     "@parcel/transformer-webmanifest": "2.10.0",
-    "@types/react": "^18.0.9",
+    "@types/react": "19.0.3",
     "parcel": "2.10.0",
     "typescript": "5.5.2"
   },

examples/react/default-theme/src/components/layout/Tabs.tsx

@@ -50,7 +50,9 @@ export function Tabs({ children }: { children: React.ReactNode }) {
               id={getTabId(index, 'title')}
               tabIndex={isSelected ? 0 : -1}
               className={cx('Tabs-title', isSelected && 'Tabs-title--active')}
-              ref={(element) => (tabsRefs.current[index] = element!)}
+              ref={(element) => {
+                tabsRefs.current[index] = element!;
+              }}
               key={getTabId(index)}
               onClick={() => setCurrentTab(index)}
               onKeyDown={onKeyDown}

examples/react/e-commerce/components/ClearFiltersMobile.tsx

@@ -4,7 +4,7 @@ import { useClearRefinements } from 'react-instantsearch';
 export function ClearFiltersMobile({
   containerRef,
 }: {
-  containerRef: React.RefObject<HTMLElement>;
+  containerRef: React.RefObject<HTMLElement | null>;
 }) {
   const { refine } = useClearRefinements();
 

examples/react/e-commerce/package.json

@@ -12,16 +12,16 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "instantsearch.js": "4.75.7",
-    "react": "18.2.0",
+    "react": "19.0.0",
     "react-compound-slider": "3.4.0",
-    "react-dom": "18.2.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10"
   },
   "devDependencies": {
     "@parcel/core": "2.10.0",
     "@parcel/packager-raw-url": "2.10.0",
     "@parcel/transformer-webmanifest": "2.10.0",
-    "@types/react": "^18.0.9",
+    "@types/react": "19.0.3",
     "parcel": "2.10.0",
     "typescript": "5.5.2"
   },

examples/react/getting-started/package.json

@@ -10,15 +10,15 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "instantsearch.js": "4.75.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10"
   },
   "devDependencies": {
     "@parcel/core": "2.10.0",
     "@parcel/packager-raw-url": "2.10.0",
     "@parcel/transformer-webmanifest": "2.10.0",
-    "@types/react": "^18.0.9",
+    "@types/react": "19.0.3",
     "parcel": "2.10.0",
     "typescript": "5.5.2"
   },

examples/react/next-app-router/package.json

@@ -12,14 +12,14 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "next": "13.5.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",
     "react-instantsearch-nextjs": "0.3.21"
   },
   "devDependencies": {
     "@types/node": "17.0.40",
-    "@types/react": "18.0.12",
+    "@types/react": "19.0.3",
     "eslint": "8.4.0",
     "eslint-config-next": "12.0.7",
     "typescript": "5.5.2"

examples/react/next-routing/package.json

@@ -12,14 +12,14 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "next": "13.5.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",
     "react-instantsearch-router-nextjs": "7.13.10"
   },
   "devDependencies": {
     "@types/node": "17.0.40",
-    "@types/react": "18.0.12",
+    "@types/react": "19.0.3",
     "eslint": "8.4.0",
     "eslint-config-next": "12.0.7",
     "typescript": "5.5.2"

examples/react/next/package.json

@@ -12,14 +12,14 @@
     "algoliasearch": "5.1.1",
     "instantsearch.css": "8.5.1",
     "next": "13.5.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10",
     "react-instantsearch-router-nextjs": "7.13.10"
   },
   "devDependencies": {
     "@types/node": "17.0.40",
-    "@types/react": "18.0.12",
+    "@types/react": "19.0.3",
     "eslint": "8.4.0",
     "eslint-config-next": "12.0.7",
     "typescript": "5.5.2"

examples/react/ssr/package.json

@@ -24,8 +24,8 @@
   "dependencies": {
     "algoliasearch": "5.1.1",
     "express": "4.17.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-instantsearch": "7.13.10"
   }
 }

package.json

@@ -60,18 +60,17 @@
     "@testing-library/dom": "8.18.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/preact": "3.2.2",
-    "@testing-library/react": "13.2.0",
-    "@testing-library/react-hooks": "7.0.2",
+    "@testing-library/react": "16.1.0",
     "@testing-library/user-event": "13.5.0",
     "@types/enzyme": "^3.1.15",
     "@types/googlemaps": "^3.30.16",
     "@types/jest": "^27.4.0",
     "@types/jest-diff": "^24.3.0",
     "@types/jsdom": "16.2.13",
     "@types/prop-types": "^15.5.8",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-test-renderer": "^18.0.0",
+    "@types/react": "19.0.3",
+    "@types/react-dom": "19.0.2",
+    "@types/react-test-renderer": "19.0.0",
     "@types/storybook__addon-actions": "3.4.2",
     "@types/storybook__addon-knobs": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "5.38.1",
@@ -126,9 +125,9 @@
     "places.js": "1.17.1",
     "prettier": "^2.4.1",
     "prop-types": "15.6.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-test-renderer": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-test-renderer": "19.0.0",
     "rheostat": "2.2.0",
     "rollup": "1.29.1",
     "rollup-plugin-babel": "4.3.3",

packages/instantsearch-ui-components/global.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import type { JSX as ReactJSX } from 'react';
+
+declare global {
+  namespace JSX {
+    interface Element extends ReactJSX.Element {}
+    interface IntrinsicElements extends ReactJSX.IntrinsicElements {}
+  }
+}

packages/instantsearch-ui-components/src/components/Highlight.tsx

@@ -9,11 +9,12 @@ import type {
 } from '../types';
 
 type HighlightPartProps = {
-  children: ComponentChildren;
+  children?: ComponentChildren;
   classNames: Partial<HighlightClassNames>;
   highlightedTagName: ElementType;
   nonHighlightedTagName: ElementType;
   isHighlighted: boolean;
+  key?: string | number;
 };
 
 function createHighlightPartComponent({ createElement }: Renderer) {

packages/instantsearch-ui-components/src/components/Hits.tsx

@@ -56,6 +56,7 @@ export type HitsProps<THit> = ComponentProps<'div'> & {
     className: string;
     onClick: () => void;
     onAuxClick: () => void;
+    key?: string | number;
   }) => JSX.Element;
   sendEvent: SendEventForHits;
   classNames?: Partial<HitsClassNames>;

packages/instantsearch-ui-components/src/types/Renderer.ts

@@ -4,7 +4,7 @@
 // Ensure that the JSX namespace is available in this file and its dependents.
 declare global {
   namespace JSX {
-    interface Element {}
+    interface Element extends VNode {}
     interface IntrinsicElements {}
   }
 }
@@ -60,8 +60,8 @@ export type VNode<TProps = any> = {
   type: any;
   props: TProps & {
     children: ComponentChildren;
-    key?: string | number | null;
   };
+  key: string | null;
 };
 
 export type Renderer = {

packages/react-instantsearch-core/package.json

@@ -59,6 +59,6 @@
   },
   "peerDependencies": {
     "algoliasearch": ">= 3.1 < 6",
-    "react": ">= 16.8.0 < 19"
+    "react": ">= 16.8.0 < 20"
   }
 }

packages/react-instantsearch-core/src/components/DynamicWidgets.tsx

@@ -66,7 +66,9 @@ export function DynamicWidgets({
   );
 }
 
-function isReactElement(element: any): element is ReactElement {
+function isReactElement(
+  element: any
+): element is ReactElement<Record<string, any>> {
   return typeof element === 'object' && element.props;
 }
 

packages/react-instantsearch-core/src/components/__tests__/InstantSearch.test.tsx

@@ -605,7 +605,7 @@ describe('InstantSearch', () => {
           }),
         },
       ]);
-      expect(warn).toHaveBeenCalledTimes(4);
+      expect(warn).toHaveBeenCalledTimes(3);
     });
   });
 

packages/react-instantsearch-core/src/connectors/__tests__/useBreadcrumb.test.tsx

@@ -1,10 +1,14 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import {
   createSearchClient,
   createMultiSearchResponse,
   createSingleSearchResponse,
 } from '@instantsearch/mocks';
 import { createInstantSearchTestWrapper } from '@instantsearch/testutils';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { useBreadcrumb } from '../useBreadcrumb';
@@ -16,7 +20,7 @@ import type { MockSearchClient } from '@instantsearch/mocks';
 describe('useBreadcrumb', () => {
   it('returns the connector render state', async () => {
     const wrapper = createInstantSearchTestWrapper();
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       () =>
         useBreadcrumb({
           attributes: [
@@ -38,14 +42,14 @@ describe('useBreadcrumb', () => {
       refine: expect.any(Function),
     });
 
-    await waitForNextUpdate();
-
-    // InstantSearch.js state from the `render` lifecycle step
-    expect(result.current).toEqual({
-      canRefine: false,
-      createURL: expect.any(Function),
-      items: [],
-      refine: expect.any(Function),
+    await waitFor(() => {
+      // InstantSearch.js state from the `render` lifecycle step
+      expect(result.current).toEqual({
+        canRefine: false,
+        createURL: expect.any(Function),
+        items: [],
+        refine: expect.any(Function),
+      });
     });
   });
 
@@ -98,7 +102,7 @@ describe('useBreadcrumb', () => {
         ) as MockSearchClient['search'],
       }),
     });
-    const { result, waitForNextUpdate } = renderHook(
+    const { result } = renderHook(
       () =>
         useBreadcrumb({
           attributes: [
@@ -134,28 +138,28 @@ describe('useBreadcrumb', () => {
       refine: expect.any(Function),
     });
 
-    await waitForNextUpdate();
-
-    // InstantSearch.js state from the `render` lifecycle step
-    expect(result.current).toEqual({
-      canRefine: true,
-      createURL: expect.any(Function),
-      items: [
-        {
-          label: 'Appliances',
-          value: 'Appliances > Small Kitchen Appliances',
-        },
-        {
-          label: 'Small Kitchen Appliances',
-          value:
-            'Appliances > Small Kitchen Appliances > Coffee, Tea & Espresso',
-        },
-        {
-          label: 'Coffee, Tea & Espresso',
-          value: null,
-        },
-      ],
-      refine: expect.any(Function),
+    await waitFor(() => {
+      // InstantSearch.js state from the `render` lifecycle step
+      expect(result.current).toEqual({
+        canRefine: true,
+        createURL: expect.any(Function),
+        items: [
+          {
+            label: 'Appliances',
+            value: 'Appliances > Small Kitchen Appliances',
+          },
+          {
+            label: 'Small Kitchen Appliances',
+            value:
+              'Appliances > Small Kitchen Appliances > Coffee, Tea & Espresso',
+          },
+          {
+            label: 'Coffee, Tea & Espresso',
+            value: null,
+          },
+        ],
+        refine: expect.any(Function),
+      });
     });
   });
 });