upgrade to react 19

kentcdodds · kentcdodds · commit 13f06470f0c9 · 2024-04-26T15:35:36.000-06:00
diff --git a/epicshop/package-lock.json b/epicshop/package-lock.json
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,14 +1,17 @@
 /** @type {import('@types/eslint').Linter.Config} */
 export default {
+	files: ['**/*.js', '**/*.ts', '**/*.tsx'],
 	languageOptions: { parser: await import('@typescript-eslint/parser') },
 	plugins: {
 		'@typescript-eslint': (await import('@typescript-eslint/eslint-plugin'))
 			.default,
+		'react-hooks': (await import('eslint-plugin-react-hooks')).default,
 		import: (await import('eslint-plugin-import')).default,
 	},
 	rules: {
-		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
-		'no-empty-pattern': 'off',
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
+
 		'@typescript-eslint/consistent-type-imports': [
 			'warn',
 			{
diff --git a/exercises/05.portals/01.problem.create/posts.tsx b/exercises/05.portals/01.problem.create/posts.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
+import { getQueryParam, useSearchParams } from './params'
+import { ButtonWithTooltip } from './tooltip'
 import {
 	type BlogPost,
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { getQueryParam, useSearchParams } from './params'
-import { ButtonWithTooltip } from './tooltip'
 
 export function MatchingPosts() {
 	const [searchParams] = useSearchParams()
diff --git a/exercises/05.portals/01.problem.create/tooltip.tsx b/exercises/05.portals/01.problem.create/tooltip.tsx
@@ -14,7 +14,7 @@ export default function Tooltip({
 	children: React.ReactNode
 	targetRect: Position | null
 }) {
-	const ref = useRef<HTMLDivElement | null>(null)
+	const ref = useRef<HTMLDivElement>(null)
 	const [tooltipHeight, setTooltipHeight] = useState(0)
 
 	useEffect(() => {
@@ -54,7 +54,7 @@ function TooltipContainer({
 	children: React.ReactNode
 	x: number
 	y: number
-	contentRef: React.RefObject<HTMLDivElement>
+	contentRef: React.RefObject<HTMLDivElement | null>
 }) {
 	return (
 		<div
diff --git a/exercises/05.portals/01.solution.create/posts.tsx b/exercises/05.portals/01.solution.create/posts.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
+import { getQueryParam, useSearchParams } from './params'
+import { ButtonWithTooltip } from './tooltip'
 import {
 	type BlogPost,
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { getQueryParam, useSearchParams } from './params'
-import { ButtonWithTooltip } from './tooltip'
 
 export function MatchingPosts() {
 	const [searchParams] = useSearchParams()
diff --git a/exercises/05.portals/01.solution.create/tooltip.tsx b/exercises/05.portals/01.solution.create/tooltip.tsx
@@ -55,7 +55,7 @@ function TooltipContainer({
 	children: React.ReactNode
 	x: number
 	y: number
-	contentRef: React.RefObject<HTMLDivElement>
+	contentRef: React.RefObject<HTMLDivElement | null>
 }) {
 	return (
 		<div
diff --git a/exercises/06.layout-computation/01.problem.layout-effect/posts.tsx b/exercises/06.layout-computation/01.problem.layout-effect/posts.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
+import { getQueryParam, useSearchParams } from './params'
+import { ButtonWithTooltip } from './tooltip'
 import {
 	type BlogPost,
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { getQueryParam, useSearchParams } from './params'
-import { ButtonWithTooltip } from './tooltip'
 
 export function MatchingPosts() {
 	const [searchParams] = useSearchParams()
diff --git a/exercises/06.layout-computation/01.problem.layout-effect/tooltip.tsx b/exercises/06.layout-computation/01.problem.layout-effect/tooltip.tsx
@@ -63,7 +63,7 @@ function TooltipContainer({
 	children: React.ReactNode
 	x: number
 	y: number
-	contentRef: React.RefObject<HTMLDivElement>
+	contentRef: React.RefObject<HTMLDivElement | null>
 }) {
 	return (
 		<div
diff --git a/exercises/06.layout-computation/01.solution.layout-effect/posts.tsx b/exercises/06.layout-computation/01.solution.layout-effect/posts.tsx
@@ -1,11 +1,11 @@
 import { useState } from 'react'
+import { getQueryParam, useSearchParams } from './params'
+import { ButtonWithTooltip } from './tooltip'
 import {
 	type BlogPost,
 	generateGradient,
 	getMatchingPosts,
 } from '#shared/blog-posts'
-import { getQueryParam, useSearchParams } from './params'
-import { ButtonWithTooltip } from './tooltip'
 
 export function MatchingPosts() {
 	const [searchParams] = useSearchParams()
diff --git a/exercises/06.layout-computation/01.solution.layout-effect/tooltip.tsx b/exercises/06.layout-computation/01.solution.layout-effect/tooltip.tsx
@@ -61,7 +61,7 @@ function TooltipContainer({
 	children: React.ReactNode
 	x: number
 	y: number
-	contentRef: React.RefObject<HTMLDivElement>
+	contentRef: React.RefObject<HTMLDivElement | null>
 }) {
 	return (
 		<div
diff --git a/exercises/07.imperative-handle/01.problem.ref/index.tsx b/exercises/07.imperative-handle/01.problem.ref/index.tsx
@@ -9,7 +9,7 @@ import { allMessages } from './messages'
 // }
 
 // 🐨 Accept `scrollableRef` as a prop here
-// 🦺 it's type should be React.RefObject<ScrollableImperativeAPI>
+// 🦺 it's type should be React.RefObject<ScrollableImperativeAPI | null>
 function Scrollable({ children }: { children: React.ReactNode }) {
 	const containerRef = useRef<HTMLDivElement>(null)
 
diff --git a/exercises/07.imperative-handle/01.solution.ref/index.tsx b/exercises/07.imperative-handle/01.solution.ref/index.tsx
@@ -11,7 +11,7 @@ function Scrollable({
 	children,
 	scrollableRef,
 }: { children: React.ReactNode } & {
-	scrollableRef: React.RefObject<ScrollableImperativeAPI>
+	scrollableRef: React.RefObject<ScrollableImperativeAPI | null>
 }) {
 	const containerRef = useRef<HTMLDivElement>(null)
 
diff --git a/exercises/07.imperative-handle/README.mdx b/exercises/07.imperative-handle/README.mdx
@@ -14,13 +14,13 @@ component can attach methods to that `ref` which the parent can then call:
 type InputAPI = { focusInput: () => void }
 
 function MyInput({
-	myInputRef,
+	ref,
 	...props
 }: React.InputHTMLAttributes<HTMLInputElement> & {
-	myInputRef: React.RefObject<InputAPI>
+	ref: React.RefObject<InputAPI>
 }) {
 	const inputRef = useRef()
-	myInputRef.current = {
+	ref.current = {
 		focusInput: () => inputRef.current.focus(),
 	}
 	return <input ref={inputRef} {...props} />
@@ -47,14 +47,14 @@ callback refs). So instead, we'll use the `useImperativeHandle` hook to do this:
 type InputAPI = { focusInput: () => void }
 
 function MyInput({
-	myInputRef,
+	ref,
 	...props
 }: React.InputHTMLAttributes<HTMLInputElement> & {
-	myInputRef: React.RefObject<InputAPI>
+	ref: React.RefObject<InputAPI>
 }) {
 	const inputRef = useRef()
 	useImperativeHandle(
-		myInputRef,
+		ref,
 		() => ({ focusInput: () => inputRef.current.focus() }),
 		[],
 	)
@@ -78,11 +78,3 @@ that needs to happen and is hard to deal with declaratively.
 > follow and it's much better to make your APIs declarative if possible. For
 > more on this, read
 > [Imperative vs Declarative Programming](https://tylermcginnis.com/imperative-vs-declarative-programming/)
-
-<callout-warning>
-	The typical way to handle refs for components is to use the `React.forwardRef`
-	API, however in the near future, React will remove the `React.forwardRef` API
-	and instead you'll receive the `ref` as a regular prop. Until that happens, if
-	you try to pass a `ref` prop without using `React.forwardRef`, you'll get an
-	error. So just name it something other than `ref`.
-</callout-warning>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/reset.d.ts b/reset.d.ts
