feat(deps): update react to 19 (#2487)

reece-white · dylantientcheu · web-flow · commit 698c00c95543 · 2025-02-06T17:24:14.000+01:00
* chore(deps): update react to 19

* fix: examples to show backwards compatibility with react 18

* fix: types

* fix: eslint

---------

Co-authored-by: Dylan Tientcheu &lt;dylantientcheu@gmail.com&gt;
diff --git a/examples/demo-react-18/index.html b/examples/demo-react-18/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>DocSearch v3 - React</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/examples/demo-react-18/package.json b/examples/demo-react-18/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@docsearch/react-18-example",
+  "description": "DocSearch v3 React 18 example",
+  "version": "3.8.3",
+  "private": true,
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@docsearch/css": "workspace:*",
+    "@docsearch/react": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.7"
+  }
+}
diff --git a/examples/demo-react-18/public/favicon.ico b/examples/demo-react-18/public/favicon.ico
diff --git a/examples/demo-react-18/src/App.css b/examples/demo-react-18/src/App.css
@@ -0,0 +1,4 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
diff --git a/examples/demo-react-18/src/App.tsx b/examples/demo-react-18/src/App.tsx
@@ -0,0 +1,15 @@
+import { DocSearch } from '@docsearch/react';
+import React from 'react';
+import './App.css';
+import '@docsearch/css/dist/style.css';
+
+function App(): React.JSX.Element {
+  return (
+    <div>
+      <h1>DocSearch v3 - React - 18</h1>
+      <DocSearch indexName="vuejs" appId="ML0LEBN7FQ" apiKey="21cf9df0734770a2448a9da64a700c22" insights={true} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/demo-react-18/src/main.tsx b/examples/demo-react-18/src/main.tsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/react-in-jsx-scope */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/demo-react-18/src/vite-env.d.ts b/examples/demo-react-18/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/demo-react-18/tsconfig.json b/examples/demo-react-18/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src",
+    "vite.config.ts"
+  ],
+}
diff --git a/examples/demo-react-18/vite.config.ts b/examples/demo-react-18/vite.config.ts
@@ -0,0 +1,7 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});
diff --git a/examples/demo/package.json b/examples/demo/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@docsearch/css": "3.8.3",
     "@docsearch/react": "3.8.3",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/examples/demo/src/App.tsx b/examples/demo/src/App.tsx
@@ -1,5 +1,5 @@
 import { DocSearch } from '@docsearch/react';
-
+import type { JSX } from 'react';
 import './App.css';
 import '@docsearch/css/dist/style.css';
 
diff --git a/package.json b/package.json
@@ -43,8 +43,8 @@
     "@rollup/plugin-terser": "0.4.4",
     "@stylistic/eslint-plugin": "2.13.0",
     "@testing-library/dom": "10.4.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "8.20.0",
     "@typescript-eslint/parser": "8.20.0",
     "babel-plugin-module-resolver": "5.0.2",
@@ -66,8 +66,8 @@
     "lerna": "8.1.9",
     "postcss": "8.5.1",
     "prettier": "3.4.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "4.31.0",
     "rollup-plugin-dts": "6.1.1",
     "rollup-plugin-filesize": "10.0.0",
diff --git a/packages/docsearch-react/package.json b/packages/docsearch-react/package.json
@@ -48,9 +48,9 @@
     "vitest": "3.0.2"
   },
   "peerDependencies": {
-    "@types/react": ">= 16.8.0 < 19.0.0",
-    "react": ">= 16.8.0 < 19.0.0",
-    "react-dom": ">= 16.8.0 < 19.0.0",
+    "@types/react": ">= 16.8.0 < 20.0.0",
+    "react": ">= 16.8.0 < 20.0.0",
+    "react-dom": ">= 16.8.0 < 20.0.0",
     "search-insights": ">= 1 < 3"
   },
   "peerDependenciesMeta": {
diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 type AlgoliaLogoTranslations = Partial<{
   searchByText: string;
diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx
@@ -1,6 +1,6 @@
 import type { AutocompleteState, AutocompleteOptions } from '@algolia/autocomplete-core';
 import type { LiteClient, SearchParamsObject } from 'algoliasearch/lite';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { createPortal } from 'react-dom';
 
 import { DocSearchButton } from './DocSearchButton';
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { type JSX, useEffect, useState } from 'react';
 
 import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
diff --git a/packages/docsearch-react/src/DocSearchModal.tsx b/packages/docsearch-react/src/DocSearchModal.tsx
@@ -1,6 +1,6 @@
 import { type AlgoliaInsightsHit, createAutocomplete } from '@algolia/autocomplete-core';
 import type { SearchResponse } from 'algoliasearch/lite';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
 import type { DocSearchProps } from './DocSearch';
diff --git a/packages/docsearch-react/src/ErrorScreen.tsx b/packages/docsearch-react/src/ErrorScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { ErrorIcon } from './icons';
 
diff --git a/packages/docsearch-react/src/Footer.tsx b/packages/docsearch-react/src/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { AlgoliaLogo } from './AlgoliaLogo';
 
diff --git a/packages/docsearch-react/src/Hit.tsx b/packages/docsearch-react/src/Hit.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import type { InternalDocSearchHit, StoredDocSearchHit } from './types';
 
diff --git a/packages/docsearch-react/src/NoResultsScreen.tsx b/packages/docsearch-react/src/NoResultsScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { NoResultsIcon } from './icons';
 import type { ScreenStateProps } from './ScreenState';
diff --git a/packages/docsearch-react/src/Results.tsx b/packages/docsearch-react/src/Results.tsx
@@ -1,5 +1,5 @@
 import type { AutocompleteApi, AutocompleteState, BaseItem } from '@algolia/autocomplete-core';
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import type { DocSearchProps } from './DocSearch';
 import { Snippet } from './Snippet';
diff --git a/packages/docsearch-react/src/ResultsScreen.tsx b/packages/docsearch-react/src/ResultsScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { SelectIcon, SourceIcon } from './icons';
 import { Results } from './Results';
diff --git a/packages/docsearch-react/src/SearchBox.tsx b/packages/docsearch-react/src/SearchBox.tsx
@@ -1,6 +1,5 @@
 import type { AutocompleteApi, AutocompleteState } from '@algolia/autocomplete-core';
-import type { MutableRefObject } from 'react';
-import React from 'react';
+import React, { type JSX, type RefObject } from 'react';
 
 import { MAX_QUERY_SIZE } from './constants';
 import { LoadingIcon } from './icons/LoadingIcon';
@@ -20,7 +19,7 @@ interface SearchBoxProps
   extends AutocompleteApi<InternalDocSearchHit, React.FormEvent, React.MouseEvent, React.KeyboardEvent> {
   state: AutocompleteState<InternalDocSearchHit>;
   autoFocus: boolean;
-  inputRef: MutableRefObject<HTMLInputElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
   onClose: () => void;
   isFromSelection: boolean;
   translations?: SearchBoxTranslations;
diff --git a/packages/docsearch-react/src/Snippet.tsx b/packages/docsearch-react/src/Snippet.tsx
@@ -1,4 +1,4 @@
-import { createElement } from 'react';
+import { type JSX, createElement } from 'react';
 
 import type { StoredDocSearchHit } from './types';
 
diff --git a/packages/docsearch-react/src/StartScreen.tsx b/packages/docsearch-react/src/StartScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { RecentIcon, ResetIcon, StarIcon } from './icons';
 import { Results } from './Results';
diff --git a/packages/docsearch-react/src/__tests__/api.test.tsx b/packages/docsearch-react/src/__tests__/api.test.tsx
@@ -1,5 +1,5 @@
 import { render, act, fireEvent, screen, cleanup } from '@testing-library/react';
-import React from 'react';
+import React, { type JSX } from 'react';
 import { describe, it, expect, afterEach } from 'vitest';
 
 import '@testing-library/jest-dom/vitest';
diff --git a/packages/docsearch-react/src/icons/ControlKeyIcon.tsx b/packages/docsearch-react/src/icons/ControlKeyIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ControlKeyIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/ErrorIcon.tsx b/packages/docsearch-react/src/icons/ErrorIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ErrorIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/GoToExternalIcon.tsx b/packages/docsearch-react/src/icons/GoToExternalIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function GoToExternal(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/LoadingIcon.tsx b/packages/docsearch-react/src/icons/LoadingIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function LoadingIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/NoResultsIcon.tsx b/packages/docsearch-react/src/icons/NoResultsIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function NoResultsIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/RecentIcon.tsx b/packages/docsearch-react/src/icons/RecentIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function RecentIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/ResetIcon.tsx b/packages/docsearch-react/src/icons/ResetIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function ResetIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/SearchIcon.tsx b/packages/docsearch-react/src/icons/SearchIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function SearchIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/SelectIcon.tsx b/packages/docsearch-react/src/icons/SelectIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function SelectIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/icons/SourceIcon.tsx b/packages/docsearch-react/src/icons/SourceIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 const LvlIcon: React.FC = () => {
   return (
diff --git a/packages/docsearch-react/src/icons/StarIcon.tsx b/packages/docsearch-react/src/icons/StarIcon.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 export function StarIcon(): JSX.Element {
   return (
diff --git a/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts b/packages/docsearch-react/src/useDocSearchKeyboardEvents.ts
@@ -5,7 +5,7 @@ export interface UseDocSearchKeyboardEventsProps {
   onOpen: () => void;
   onClose: () => void;
   onInput?: (event: KeyboardEvent) => void;
-  searchButtonRef?: React.RefObject<HTMLButtonElement>;
+  searchButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 function isEditingContent(event: KeyboardEvent): boolean {
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +body {
 +  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
 +    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 +}