From c0af2d01cba44225dece12fa9e71476ce30a4af3 Mon Sep 17 00:00:00 2001 From: Johanna Kveton Date: Wed, 29 Oct 2025 19:49:24 +0100 Subject: [PATCH 1/3] Add note on error boundary limitations (#8108) --- src/content/reference/react/Component.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 9d2d1007b..2509aa759 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1271,6 +1271,16 @@ We recommend defining components as functions instead of classes. [See how to mi By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an *Error Boundary*. An Error Boundary is a special component that lets you display some fallback UI instead of the part that crashed--for example, an error message. + +Error boundaries do not catch errors for: + +- Event handlers [(learn more)](/learn/responding-to-events) +- [Server side rendering](/reference/react-dom/server) +- Errors thrown in the error boundary itself (rather than its children) +- Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks); an exception is the usage of the [`startTransition`](/reference/react/useTransition#starttransition) function returned by the [`useTransition`](/reference/react/useTransition) Hook. Errors thrown inside the transition function are caught by error boundaries [(learn more)](/reference/react/useTransition#displaying-an-error-to-users-with-error-boundary) + + + To implement an Error Boundary component, you need to provide [`static getDerivedStateFromError`](#static-getderivedstatefromerror) which lets you update state in response to an error and display an error message to the user. You can also optionally implement [`componentDidCatch`](#componentdidcatch) to add some extra logic, for example, to log the error to an analytics service. With [`captureOwnerStack`](/reference/react/captureOwnerStack) you can include the Owner Stack during development. From e57e9122852b5c64129dd71b5beb1e982be6708d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EC=8A=B9=EC=A7=84?= Date: Fri, 31 Oct 2025 20:04:05 +0900 Subject: [PATCH 2/3] docs(blog): Add 'React 19.2' to blog sidebar (#8113) --- src/sidebarBlog.json | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json index 7bcd4a000..3497fdd0b 100644 --- a/src/sidebarBlog.json +++ b/src/sidebarBlog.json @@ -32,6 +32,13 @@ "date": "October 7, 2025", "path": "/blog/2025/10/07/introducing-the-react-foundation" }, + { + "title": "React 19.2", + "titleForHomepage": "React 19.2", + "icon": "blog", + "date": "October 1, 2025", + "path": "/blog/2025/10/01/react-19-2" + }, { "title": "React Labs: View Transitions, Activity, and more", "titleForHomepage": "View Transitions and Activity", From f9e2c1396769bb5da87db60f9ff03683d18711e2 Mon Sep 17 00:00:00 2001 From: Joshua Comeau Date: Sat, 1 Nov 2025 00:11:49 -0400 Subject: [PATCH 3/3] Remove 'esquery' hack to potentially enable Turbopack (#8115) * Remove esquery hack * Add comment explaining next.config change --- next.config.js | 8 ++++++++ src/components/MDX/Sandpack/runESLint.tsx | 7 ------- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/next.config.js b/next.config.js index 5a5755307..fe88a09a0 100644 --- a/next.config.js +++ b/next.config.js @@ -36,6 +36,14 @@ const nextConfig = { // Don't bundle the shim unnecessarily. config.resolve.alias['use-sync-external-store/shim'] = 'react'; + // ESLint depends on the CommonJS version of esquery, + // but Webpack loads the ESM version by default. This + // alias ensures the correct version is used. + // + // More info: + // https://github.com/reactjs/react.dev/pull/8115 + config.resolve.alias['esquery'] = 'esquery/dist/esquery.min.js'; + const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack'); config.plugins.push( new NormalModuleReplacementPlugin( diff --git a/src/components/MDX/Sandpack/runESLint.tsx b/src/components/MDX/Sandpack/runESLint.tsx index a0b835461..667b22d7e 100644 --- a/src/components/MDX/Sandpack/runESLint.tsx +++ b/src/components/MDX/Sandpack/runESLint.tsx @@ -21,13 +21,6 @@ const getCodeMirrorPosition = ( const linter = new Linter(); -// HACK! Eslint requires 'esquery' using `require`, but there's no commonjs interop. -// because of this it tries to run `esquery.parse()`, while there's only `esquery.default.parse()`. -// This hack places the functions in the right place. -const esquery = require('esquery'); -esquery.parse = esquery.default?.parse; -esquery.matches = esquery.default?.matches; - const reactRules = require('eslint-plugin-react-hooks').rules; linter.defineRules({ 'react-hooks/rules-of-hooks': reactRules['rules-of-hooks'],