Merge pull request #1590 from chrisvxd/react-19

React 19 (experimental)
clauderic · Jan 24, 2025 · 6ce827f · 6ce827f
2 parents 5792b36 + 96338f7
commit 6ce827f
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 16 deletions.
diff --git a/.changeset/react-19-peer-dep.md b/.changeset/react-19-peer-dep.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/react': patch
+---
+
+Add React 19 to list of supported peer dependencies.
diff --git a/apps/stories/package.json b/apps/stories/package.json
@@ -18,8 +18,8 @@
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "clipboard": "^2.0.11",
     "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-tiny-virtual-list": "^2.2.0",
     "react-window": "1.8.9"
   },
@@ -30,12 +30,12 @@
     "@storybook/addon-docs": "^8.1.5",
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-vite": "^8.1.5",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-vite": "^8.5.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "serve": "^14.2.1",
-    "storybook": "^8.1.5",
+    "storybook": "^8.5.1",
     "storybook-dark-mode": "^4.0.1",
     "typescript": "^5.5.2",
     "vite": "^5.1.1"

diff --git a/apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.tsx b/apps/stories/stories/components/docs/Code/components/CodeHighlighter/CodeHighlighter.tsx
@@ -14,7 +14,7 @@ interface Props {
 
 export function CodeHighlighter({children = '', language = 'jsx'}: Props) {
   const lineCount = children.split('\n').length - 1;
-  const nodeRef = useRef<HTMLButtonElement>();
+  const nodeRef = useRef<HTMLButtonElement>(null);
   const highlightedCode = useMemo(
     () =>
       syntaxReplacements(

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/collision/package.json b/packages/collision/package.json
@@ -33,7 +33,6 @@
     "@types/react-dom": "^18.0.4",
     "eslint": "^8.38.0",
     "@dnd-kit/eslint-config": "*",
-    "react": "^18.1.0",
     "tsup": "^8.1.0",
     "typescript": "^5.5.2"
   },

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -62,15 +62,15 @@
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 | ^19.0.0",
+    "react-dom": "^18.0.0 | ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^8.38.0",
     "@dnd-kit/eslint-config": "*",
-    "react": "^18.1.0",
+    "react": "^19.0.0",
     "tsup": "^8.1.0",
     "typescript": "^5.5.2"
   },

diff --git a/packages/react/src/core/context/renderer.ts b/packages/react/src/core/context/renderer.ts
@@ -5,8 +5,8 @@ import {useConstant, useOnValueChange} from '@dnd-kit/react/hooks';
 export function useRenderer() {
   const [_, startTransition] = useTransition();
   const [transitionCount, setTransitionCount] = useState(0);
-  const rendering = useRef<Promise<void>>();
-  const resolver = useRef<() => void>();
+  const rendering = useRef<Promise<void>>(null);
+  const resolver = useRef<() => void>(null);
   const renderer = useConstant<Renderer>(() => ({
     get rendering() {
       return rendering.current ?? Promise.resolve();
@@ -17,7 +17,7 @@ export function useRenderer() {
     transitionCount,
     () => {
       resolver.current?.();
-      rendering.current = undefined;
+      rendering.current = null;
     },
     useLayoutEffect
   );

diff --git a/packages/react/src/hooks/useConstant.ts b/packages/react/src/hooks/useConstant.ts
@@ -1,7 +1,7 @@
 import {useRef} from 'react';
 
 export function useConstant<T = any>(initializer: () => T) {
-  const ref = useRef<T>();
+  const ref = useRef<T>(null);
 
   if (!ref.current) {
     ref.current = initializer();