From 47c818c479de83bb80166965a751cd3782f30a6e Mon Sep 17 00:00:00 2001
From: Delphine Bugner <delphineb@bam.tech>
Date: Mon, 5 Feb 2024 19:42:34 +0100
Subject: [PATCH 01/35] feat (conferences) add react connection Paris (#6609)

---
 src/content/community/conferences.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 0e15359f..ef330187 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -25,6 +25,16 @@ April 19 - 20, 2024. In-person in Miami, FL, USA
 
 [Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
 
+### React Connection 2024 {/*react-connection-2024*/}
+April 22, 2024. In-person in Paris, France 
+
+[Website](https://reactconnection.io/) - [Twitter](https://twitter.com/ReactConn)
+
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France 
+
+[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
 ### React Conf 2024 {/*react-conf-2024*/}
 May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
 

From c118938237cc8ef96a8d7680b04f7c8a2a8264fe Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Tue, 6 Feb 2024 09:36:18 -0800
Subject: [PATCH 02/35] Fix SandpackWithHTMLOutput to use src dir (#6613)

---
 src/components/MDX/SandpackWithHTMLOutput.tsx        |  6 +++---
 src/content/reference/react-dom/components/link.md   | 10 +++++-----
 src/content/reference/react-dom/components/meta.md   |  2 +-
 src/content/reference/react-dom/components/script.md |  4 ++--
 src/content/reference/react-dom/components/style.md  |  2 +-
 src/content/reference/react-dom/components/title.md  |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
index 134da658..51ce28dc 100644
--- a/src/components/MDX/SandpackWithHTMLOutput.tsx
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -20,7 +20,7 @@ export default function ShowRenderedHTML({children}) {
         {formatHTML(markup)}
       </pre>
     </>
-  );  
+  );
 }`;
 
 const formatHTML = `
@@ -77,8 +77,8 @@ export default memo(function SandpackWithHTMLOutput(
 ) {
   const children = [
     ...Children.toArray(props.children),
-    createFile('ShowRenderedHTML.js', ShowRenderedHTML),
-    createFile('formatHTML.js hidden', formatHTML),
+    createFile('src/ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('src/formatHTML.js hidden', formatHTML),
     createFile('package.json hidden', packageJSON),
   ];
   return <Sandpack {...props}>{children}</Sandpack>;
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index 890cf090..fcbb9fab 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -96,7 +96,7 @@ In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet
 
 There are two exception to this special behavior:
 
-* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.  
+* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.
 * If you supply any of the `onLoad`, `onError`, or `disabled` props, there is no special behavior, because these props indicate that you are managing the loading of the stylesheet manually within your component.
 
 This special treatment comes with two caveats:
@@ -114,7 +114,7 @@ You can annotate the document with links to related resources such as an icon, c
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function BlogPage() {
@@ -141,7 +141,7 @@ When you want to use a stylesheet, it can be beneficial to call the [preinit](/r
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
@@ -164,7 +164,7 @@ Stylesheets can conflict with each other, and when they do, the browser goes wit
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
@@ -195,7 +195,7 @@ If you render the same stylesheet from multiple components, React will place onl
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index 8489d4a4..801ca2af 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -72,7 +72,7 @@ You can render the `<meta>` component from any component. React will put a `<met
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 50c0af80..a2c4668c 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -91,7 +91,7 @@ If you supply an `src` and `async` prop, your component will suspend while the s
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Map({lat, long}) {
@@ -124,7 +124,7 @@ To include an inline script, render the `<script>` component with the script sou
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Tracking() {
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index f5cf231a..0c6d8e59 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -73,7 +73,7 @@ If you supply an `href` and `precedence` prop, your component will suspend while
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 import { useId } from 'react';
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 9d6ed18c..24b2aba2 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -66,7 +66,7 @@ Render the `<title>` component from any component with text as its children. Rea
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function ContactUsPage() {

From 9a843b67054461e6c6f0014ff153c96631faabad Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Thu, 8 Feb 2024 11:26:34 -0800
Subject: [PATCH 03/35] Add React Conf banner (#6595)

---
 src/components/SocialBanner.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/SocialBanner.tsx b/src/components/SocialBanner.tsx
index e980b6f4..4e1bf8e3 100644
--- a/src/components/SocialBanner.tsx
+++ b/src/components/SocialBanner.tsx
@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerLink = 'https://conf.react.dev/';
+const bannerLinkText = 'Learn more.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,9 +39,7 @@ export default function SocialBanner() {
       <ExternalLink
         className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
-        <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
-        <span className="hidden sm:inline">.</span>
       </ExternalLink>
     </div>
   );

From 6d43bff9e7baf499611a81dda3a8c623b0950227 Mon Sep 17 00:00:00 2001
From: Tamon Okamoto <tamonmon0417@gmail.com>
Date: Sun, 11 Feb 2024 04:38:15 +0900
Subject: [PATCH 04/35] Fix scrollbar of SidebarNav to make it tappable (#6586)

---
 src/components/Layout/Page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 5194279c..ee3c899d 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -129,7 +129,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-16">
+          <div className="lg:-mt-16 z-10">
             <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
               <SidebarNav
                 key={section}

From 6ae9922b44a7037f810db81ce8db5f834725988d Mon Sep 17 00:00:00 2001
From: Dhanraj Acharya <dhanrajacharya44@gmail.com>
Date: Sun, 11 Feb 2024 09:08:00 +0530
Subject: [PATCH 05/35] Update index.md (#6622)

Fix the grammar in the documentation.
---
 src/content/reference/react/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md
index 43394acf..6793efc5 100644
--- a/src/content/reference/react/index.md
+++ b/src/content/reference/react/index.md
@@ -8,7 +8,7 @@ This section provides detailed reference documentation for working with React. F
 
 </Intro>
 
-Our The React reference documentation is broken down into functional subsections:
+The React reference documentation is broken down into functional subsections:
 
 ## React {/*react*/}
 

From 4ff80a59f7134be25abf26e4895aee6e569d92c0 Mon Sep 17 00:00:00 2001
From: Lakshmi N <79132440+lakshmi930@users.noreply.github.com>
Date: Sun, 11 Feb 2024 07:46:44 +0400
Subject: [PATCH 06/35] Fix broken link (#6619)

---
 src/content/reference/react-dom/preload.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
index ffec1177..0ad9668d 100644
--- a/src/content/reference/react-dom/preload.md
+++ b/src/content/reference/react-dom/preload.md
@@ -146,7 +146,7 @@ function AppRoot() {
 }
 ```
 
-When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen]((https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)).
+When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 
 <Solution />
 

From d46c36041c1422c7f2cb4bbf69d708c442b12722 Mon Sep 17 00:00:00 2001
From: David Dong <73568310+DongHY1@users.noreply.github.com>
Date: Sun, 11 Feb 2024 23:02:06 +0800
Subject: [PATCH 07/35] Fix CSS discrepancy in issue #6508 (#6509)

---
 src/content/learn/reacting-to-input-with-state.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md
index 878ab0fc..da559dc0 100644
--- a/src/content/learn/reacting-to-input-with-state.md
+++ b/src/content/learn/reacting-to-input-with-state.md
@@ -545,6 +545,7 @@ body { margin: 0; padding: 0; height: 250px; }
   width: 200px;
   height: 200px;
   border-radius: 10px;
+  border: 5px solid transparent;
 }
 
 .picture--active {

From bb3a0f5c10aaeba6e6fb35f31f36b47812ece158 Mon Sep 17 00:00:00 2001
From: Romain Trotard <romain.trotard@gmail.com>
Date: Sun, 11 Feb 2024 21:19:02 +0100
Subject: [PATCH 08/35] Fix some typos (#6478)

* Fix some typos

* Fix another typo
---
 src/content/reference/react/experimental_taintUniqueValue.md | 2 +-
 src/content/reference/react/use.md                           | 4 ++--
 src/content/reference/react/useTransition.md                 | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/experimental_taintUniqueValue.md b/src/content/reference/react/experimental_taintUniqueValue.md
index e8226d92..12978758 100644
--- a/src/content/reference/react/experimental_taintUniqueValue.md
+++ b/src/content/reference/react/experimental_taintUniqueValue.md
@@ -192,7 +192,7 @@ experimental_taintUniqueValue(
 );
 ```
 
-Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, a error will be thrown with message you defined when you called `taintUniqueValue`.
+Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, an error will be thrown with message you defined when you called `taintUniqueValue`.
 
 </DeepDive>
 
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index 92b3cabc..c3c8c92d 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -351,14 +351,14 @@ But using `await` in a [Server Component](/reference/react/components#server-com
 
 In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either:
 
-1. [Displaying an error to users with error boundary.](#displaying-an-error-to-users-with-error-boundary)
+1. [Displaying an error to users with an error boundary.](#displaying-an-error-to-users-with-error-boundary)
 2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
 
 <Pitfall>
 `use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch).
 </Pitfall>
 
-#### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+#### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
 
 If you'd like to display an error to your users when a Promise is rejected, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `use` Hook in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed.
 
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index 49df279f..7881e1de 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -1501,7 +1501,7 @@ main {
 
 ---
 
-### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
 
 <Canary>
 

From a21a942db98c63e7c70589b1cbd700591b4dbcf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=98=84?= <ldh19971027@gmail.com>
Date: Wed, 14 Feb 2024 15:55:09 +0900
Subject: [PATCH 09/35] Fix typo (#6628)

---
 src/content/reference/react-dom/components/textarea.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md
index 2639fcd7..b1ef7147 100644
--- a/src/content/reference/react-dom/components/textarea.md
+++ b/src/content/reference/react-dom/components/textarea.md
@@ -55,7 +55,7 @@ These `<textarea>` props are relevant both for uncontrolled and controlled text
 * [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name): A string. Specifies the name for this input that's [submitted with the form.](#reading-the-textarea-value-when-submitting-a-form)
 * `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled text areas.](#controlling-a-text-area-with-a-state-variable) Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
 * `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
 * `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
 * [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
 * `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)

From 2c4f382d8f1b62e4539c6fd188fb89e54163297c Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 15 Feb 2024 13:48:18 -0500
Subject: [PATCH 10/35] =?UTF-8?q?Blog:=20What=20We've=20Been=20Working=20O?=
 =?UTF-8?q?n=20=E2=80=93=20February=202024=20(#6629)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Blog: What We've Been Working On – February 2024

* rm log

* Update src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

Co-authored-by: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>

* Update src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

Co-authored-by: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>

* add and

* switch

---------

Co-authored-by: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
---
 ...t-we-have-been-working-on-february-2024.md | 115 ++++++++++++++++++
 src/content/blog/index.md                     |   6 +
 src/sidebarBlog.json                          |   7 ++
 3 files changed, 128 insertions(+)
 create mode 100644 src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
new file mode 100644
index 00000000..56ada8fc
--- /dev/null
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -0,0 +1,115 @@
+---
+title: "React Labs: What We've Been Working On – February 2024"
+---
+
+February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://twitter.com/dan_abramov).
+
+---
+
+<Intro>
+
+In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our [last update](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023), and we’d like to share our progress.
+
+</Intro>
+
+<Note>
+
+React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can [sign up for the ticket lottery](https://forms.reform.app/bLaLeE/react-conf-2024-ticket-lottery/1aRQLK) until February 28th. 
+
+For more info on tickets, free streaming, sponsoring, and more, see [the React Conf website](https://conf.react.dev).
+
+</Note>
+
+---
+
+## React Compiler {/*react-compiler*/}
+
+React Compiler is no longer a research project: the compiler now powers instagram.com in production, and we are working to ship the compiler across additional surfaces at Meta and to prepare the first open source release.
+
+As discussed in our [previous post](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler), React can *sometimes* re-render too much when state changes. Since the early days of React our solution for such cases has been manual memoization. In our current APIs, this means applying the [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`memo`](/reference/react/memo) APIs to manually tune how much React re-renders on state changes. But manual memoization is a compromise. It clutters up our code, is easy to get wrong, and requires extra work to keep up to date.
+
+Manual memoization is a reasonable compromise, but we weren’t satisfied. Our vision is for React to *automatically* re-render just the right parts of the UI when state changes, *without compromising on React’s core mental model*. We believe that React’s approach — UI as a simple function of state, with standard JavaScript values and idioms — is a key part of why React has been approachable for so many developers. That’s why we’ve invested in building an optimizing compiler for React.
+
+JavaScript is a notoriously challenging language to optimize, thanks to its loose rules and dynamic nature. React Compiler is able to compile code safely by modeling both the rules of JavaScript *and* the “rules of React”. For example, React components must be idempotent — returning the same value given the same inputs — and can’t mutate props or state values. These rules limit what developers can do and help to carve out a safe space for the compiler to optimize.
+
+Of course, we understand that developers sometimes bend the rules a bit, and our goal is to make React Compiler work out of the box on as much code as possible. The compiler attempts to detect when code doesn’t strictly follow React’s rules and will either compile the code where safe or skip compilation if it isn’t safe. We’re testing against Meta’s large and varied codebase in order to help validate this approach.
+
+For developers who are curious about making sure their code follows React’s rules, we recommend [enabling Strict Mode](/reference/react/StrictMode) and [configuring React’s ESLint plugin](/learn/editor-setup#linting). These tools can help to catch subtle bugs in your React code, improving the quality of your applications today, and future-proofs your applications for upcoming features such as React Compiler. We are also working on consolidated documentation of the rules of React and updates to our ESLint plugin to help teams understand and apply these rules to create more robust apps.
+
+To see the compiler in action, you can check out our [talk from last fall](https://www.youtube.com/watch?v=qOQClO3g8-Y). At the time of the talk, we had early experimental data from trying React Compiler on one page of instagram.com. Since then, we shipped the compiler to production across instagram.com. We’ve also expanded our team to accelerate the rollout to additional surfaces at Meta and to open source. We’re excited about the path ahead and will have more to share in the coming months.
+
+## Actions {/*actions*/}
+
+
+We [previously shared](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) that we were exploring solutions for sending data from the client to the server with Server Actions, so that you can execute database mutations and implement forms. During development, we extended these APIs to support data handling in client-only applications as well.
+
+We refer to this broader collection of features as simply "Actions". Actions allow you to pass a function to DOM elements such as [`<form/>`](/reference/react-dom/components/form):
+
+```js
+<form action={search}>
+  <input name="query" />
+  <button type="submit">Search</button>
+</form>
+```
+
+The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the  [`'use server'`](/reference/react/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useFormState`](/reference/react-dom/hooks/useFormState) to access the current state and response of the form action. 
+
+By default, Actions are submitted within a [`transition`](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. 
+
+Alongside Actions, we're introducing a feature named [`useOptimistic`](/reference/react/useOptimistic) for managing optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state commits. For Actions, this allows you to optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It works using regular `async`/`await`, so it works the same whether you're using `fetch` on the client, or a Server Action from the server.
+
+Library authors can implement custom `action={fn}` props in their own components with `useTransition`. Our intent is for libraries to adopt the Actions pattern when designing their component APIs, to provide a consistent experience for React developers. For example, if your library provides a `<Calendar onSelect={eventHandler}>` component, consider also exposing a `<Calendar selectAction={action}>` API, too.
+
+While we initially focused on Server Actions for client-server data transfer, our philosophy for React is to provide the same programming model across all platforms and environments. When possible, if we introduce a feature on the client, we aim to make it also work on the server, and vice versa. This philosophy allows us to create a single set of APIs that work no matter where your app runs, making it easier to upgrade to different environments later. 
+
+Actions are now available in the Canary channel and will ship in the next release of React.
+
+## New Features in React Canary {/*new-features-in-react-canary*/}
+
+We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to adopt individual new stable features as soon as their design is close to final, before they’re released in a stable semver version. 
+
+Canaries are a change to the way we develop React. Previously, features would be researched and built privately inside of Meta, so users would only see the final polished product when released to Stable. With Canaries, we’re building in public with the help of the community to finalize features we share in the React Labs blog series. This means you hear about new features sooner, as they’re being finalized instead of after they’re complete.
+
+React Server Components, Asset Loading, Document Metadata, and Actions have all landed the React Canary, and we've added docs for these features on react.dev:
+
+- **Directives**: [`"use client"`](/reference/react/use-client) and [`"use server"`](/reference/react/use-server) are bundler features designed for full-stack React frameworks. They mark the "split points" between the two environments: `"use client"` instructs the bundler to generate a `<script>` tag (like [Astro Islands](https://docs.astro.build/en/concepts/islands/#creating-an-island)), while `"use server"` tells the bundler to generate a POST endpoint (like [tRPC Mutations](https://trpc.io/docs/concepts)). Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.
+
+- **Document Metadata**: we added built-in support for rendering [`<title>`](/reference/react-dom/components/title), [`<meta>`](/reference/react-dom/components/meta), and metadata [`<link>`](/reference/react-dom/components/link) tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC. This provides built-in support for features pioneered by libraries like [React Helmet](https://github.com/nfl/react-helmet).
+
+- **Asset Loading**: we integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like [`<style>`](/reference/react-dom/components/style), [`<link>`](/reference/react-dom/components/link), and [`<script>`](/reference/react-dom/components/script) are ready to be displayed. We’ve also added new [Resource Loading APIs](/reference/react-dom#resource-preloading-apis) like `preload` and `preinit` give greater control for when a resource should load and initialize.
+
+- **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useFormState`](/reference/react-dom/hooks/useFormState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
+
+We developed these features individually and released them incrementally for testing in the `canary` channel. This allowed us to build each feature in public, test them individually in production, and iterate on feedback until we reach a final design. Since all of these features work together, it’s difficult to release them individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. Before we can release a set of features to stable, we need to ensure they work cohesively and developers have everything they need to use them in production.
+
+The current set of features in React Canary have everything needed to build in production are ready to release in the next semver stable version of React.
+
+## The Next Major Version of React {/*the-next-major-version-of-react*/}
+
+After a couple of years of iteration, `react@canary` is now ready to ship to `react@latest`. The new features mentioned above are compatible with any environment your app runs in, providing everything needed for production use. Since Asset Loading and Document Metadata may be a breaking change for some apps, the next version of React will be a major version: **React 19**.
+
+There’s still more to be done to prepare for release. In React 19, we’re also adding long-requested improvements which require breaking changes like support for Web Components. Our focus now is to land these changes, prepare for release, finalize docs for new features, and publish announcements for what’s included.
+
+We’ll share more information about everything React 19 includes, how to adopt the new client features, and how to build support for React Server Components in the coming months.
+
+## Offscreen (renamed to Activity). {/*offscreen-renamed-to-activity*/}
+
+Since our last update, we’ve renamed a capability we’re researching from “Offscreen” to “Activity”. The name “Offscreen” implied that it only applied to parts of the app that were not visible, but while researching the feature we realized that it’s possible for parts of the app to be visible and inactive, such as content behind a modal. The new name more closely reflects the behavior of marking certain parts of the app “active” or “inactive”.
+
+Activity is still under research and our remaining work is to finalize the primitives that are exposed to library developers. We’ve deprioritized this area while we focus on shipping features that are more complete.
+
+* * *
+
+In addition to this update, our team has presented at conferences and made appearances on podcasts to speak more on our work and answer questions.
+
+- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Complier at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+
+- [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled “React from Another Dimension” which explores and alternative history of how React Server Components and Actions could have been created
+
+- [Dan Abramov](/community/team#dan-abramov) was interviewed on [the Changelog’s JS Party podcast](https://changelog.com/jsparty/311) about React Server Components
+
+- [Matt Carroll](/community/team#matt-carroll) was interviewed on the [Front-End Fire podcast](https://www.buzzsprout.com/2226499/14462424-interview-the-two-reacts-with-rachel-nabors-evan-bacon-and-matt-carroll) where he discussed [The Two Reacts](https://overreacted.io/the-two-reacts/)
+
+Thanks [Lauren Tan](https://twitter.com/potetotes), [Sophie Alpert](https://twitter.com/sophiebits), [Jason Bonta](https://threads.net/someextent), [Eli White](https://twitter.com/Eli_White), and [Sathya Gunasekaran](https://twitter.com/_gsathya) for reviewing this post.
+
+Thanks for reading, and [see you at React Conf](https://conf.react.dev/)!
diff --git a/src/content/blog/index.md b/src/content/blog/index.md
index fc8a2969..409f3370 100644
--- a/src/content/blog/index.md
+++ b/src/content/blog/index.md
@@ -10,6 +10,12 @@ This blog is the official source for the updates from the React team. Anything i
 
 <div className="sm:-mx-5 flex flex-col gap-5 mt-12">
 
+<BlogCard title="React Labs: What We've Been Working On – February 2024" date="February 15, 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024">
+
+In React Labs posts, we write about projects in active research and development. Since our last update, we've made significant progress on React Compiler, new features, and React 19, and we'd like to share what we learned.
+
+</BlogCard>
+
 <BlogCard title="React Canaries: Incremental Feature Rollout Outside Meta" date="May 3, 2023" url="/blog/2023/05/03/react-canaries">
 
 Traditionally, new React features used to only be available at Meta first, and land in the open source releases later. We'd like to offer the React community an option to adopt individual new features as soon as their design is close to final--similar to how Meta uses React internally. We are introducing a new officially supported Canary release channel. It lets curated setups like frameworks decouple adoption of individual React features from the React release schedule.
diff --git a/src/sidebarBlog.json b/src/sidebarBlog.json
index 2141181b..f90d23ef 100644
--- a/src/sidebarBlog.json
+++ b/src/sidebarBlog.json
@@ -11,6 +11,13 @@
       "path": "/blog",
       "skipBreadcrumb": true,
       "routes": [
+        {
+          "title": "React Labs: What We've Been Working On – February 2024",
+          "titleForHomepage": "React Labs: February 2024",
+          "icon": "labs",
+          "date": "February 15, 2024",
+          "path": "/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024"
+        },
         {
           "title": "React Canaries: Enabling Incremental Feature Rollout Outside Meta",
           "titleForHomepage": "React Canaries: Incremental Feature Rollout",

From c1039b3669d9dd622af0c60534bee11ee869d226 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 15 Feb 2024 15:10:56 -0500
Subject: [PATCH 11/35] minor fixes from #6629 (#6630)

---
 .../react-labs-what-we-have-been-working-on-february-2024.md  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 56ada8fc..00e85b00 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -41,7 +41,7 @@ To see the compiler in action, you can check out our [talk from last fall](https
 ## Actions {/*actions*/}
 
 
-We [previously shared](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) that we were exploring solutions for sending data from the client to the server with Server Actions, so that you can execute database mutations and implement forms. During development, we extended these APIs to support data handling in client-only applications as well.
+We [previously shared](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) that we were exploring solutions for sending data from the client to the server with Server Actions, so that you can execute database mutations and implement forms. During development of Server Actions, we extended these APIs to support data handling in client-only applications as well.
 
 We refer to this broader collection of features as simply "Actions". Actions allow you to pass a function to DOM elements such as [`<form/>`](/reference/react-dom/components/form):
 
@@ -70,7 +70,7 @@ We introduced [React Canaries](/blog/2023/05/03/react-canaries) as an option to
 
 Canaries are a change to the way we develop React. Previously, features would be researched and built privately inside of Meta, so users would only see the final polished product when released to Stable. With Canaries, we’re building in public with the help of the community to finalize features we share in the React Labs blog series. This means you hear about new features sooner, as they’re being finalized instead of after they’re complete.
 
-React Server Components, Asset Loading, Document Metadata, and Actions have all landed the React Canary, and we've added docs for these features on react.dev:
+React Server Components, Asset Loading, Document Metadata, and Actions have all landed in the React Canary, and we've added docs for these features on react.dev:
 
 - **Directives**: [`"use client"`](/reference/react/use-client) and [`"use server"`](/reference/react/use-server) are bundler features designed for full-stack React frameworks. They mark the "split points" between the two environments: `"use client"` instructs the bundler to generate a `<script>` tag (like [Astro Islands](https://docs.astro.build/en/concepts/islands/#creating-an-island)), while `"use server"` tells the bundler to generate a POST endpoint (like [tRPC Mutations](https://trpc.io/docs/concepts)). Together, they let you write reusable components that compose client-side interactivity with the related server-side logic.
 

From 9d3fc070901da0cba71f1ac4a509cb6df931d2ae Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 15 Feb 2024 15:23:51 -0500
Subject: [PATCH 12/35] tweaks (#6631)

---
 ...react-labs-what-we-have-been-working-on-february-2024.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 00e85b00..d06dbd8e 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -80,9 +80,11 @@ React Server Components, Asset Loading, Document Metadata, and Actions have all
 
 - **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useFormState`](/reference/react-dom/hooks/useFormState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
 
-We developed these features individually and released them incrementally for testing in the `canary` channel. This allowed us to build each feature in public, test them individually in production, and iterate on feedback until we reach a final design. Since all of these features work together, it’s difficult to release them individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. Before we can release a set of features to stable, we need to ensure they work cohesively and developers have everything they need to use them in production.
+Since all of these features work together, it’s difficult to release them in the Stable channel individually. Releasing Actions without the complementary hooks for accessing form states would limit the practical usability of Actions. Introducing React Server Components without integrating Server Actions would complicate modifying data on the server. 
 
-The current set of features in React Canary have everything needed to build in production are ready to release in the next semver stable version of React.
+Before we can release a set of features to the Stable channel, we need to ensure they work cohesively and developers have everything they need to use them in production. React Canaries allow us to develop these features individually, and release the stable APIs incrementally until the entire feature set is complete.
+
+The current set of features in React Canary are complete and ready to release.
 
 ## The Next Major Version of React {/*the-next-major-version-of-react*/}
 

From bce6e55452b981e9d3b4054f747d306fcf92f464 Mon Sep 17 00:00:00 2001
From: Jack Pope <jackpope1@gmail.com>
Date: Thu, 15 Feb 2024 16:19:28 -0500
Subject: [PATCH 13/35] Add warning page for RTR deprecation (#6632)

* Add warning page for RTR deprecation

* shorten path

* Add link for RN testing library
---
 src/content/warnings/react-test-renderer.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/content/warnings/react-test-renderer.md

diff --git a/src/content/warnings/react-test-renderer.md b/src/content/warnings/react-test-renderer.md
new file mode 100644
index 00000000..8dc5be74
--- /dev/null
+++ b/src/content/warnings/react-test-renderer.md
@@ -0,0 +1,7 @@
+---
+title: react-test-renderer Deprecation Warning
+---
+
+react-test-renderer is deprecated. A warning will fire whenever calling ReactTestRenderer.create() or ReactShallowRender.render(). The react-test-renderer package will remain available on NPM but will not be maintained and may break with new React features or changes to React's internals.
+
+The React Team recommends migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience.

From b66dece7cdb418625a0646c99d69f17aebf09da1 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Thu, 15 Feb 2024 15:15:59 -0800
Subject: [PATCH 14/35] Update
 react-labs-what-we-have-been-working-on-february-2024.md

---
 .../15/react-labs-what-we-have-been-working-on-february-2024.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index d06dbd8e..5b96a22d 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -54,7 +54,7 @@ We refer to this broader collection of features as simply "Actions". Actions all
 
 The `action` function can operate synchronously or asynchronously. You can define them on the client side using standard JavaScript or on the server with the  [`'use server'`](/reference/react/use-server) directive. When using an action, React will manage the life cycle of the data submission for you, providing hooks like [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), and [`useFormState`](/reference/react-dom/hooks/useFormState) to access the current state and response of the form action. 
 
-By default, Actions are submitted within a [`transition`](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. 
+By default, Actions are submitted within a [transition](/reference/react/useTransition), keeping the current page interactive while the action is processing. Since Actions support async functions, we've also added the ability to use `async/await` in transitions. This allows you to show pending UI with the `isPending` state of a transition when an async request like `fetch` starts, and show the pending UI all the way through the update being applied. 
 
 Alongside Actions, we're introducing a feature named [`useOptimistic`](/reference/react/useOptimistic) for managing optimistic state updates. With this hook, you can apply temporary updates that are automatically reverted once the final state commits. For Actions, this allows you to optimistically set the final state of the data on the client, assuming the submission is successful, and revert to the value for data received from the server. It works using regular `async`/`await`, so it works the same whether you're using `fetch` on the client, or a Server Action from the server.
 

From c608570d6e0f99c82f7ed32e4509a85ce04f7edb Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Thu, 15 Feb 2024 21:49:40 -0800
Subject: [PATCH 15/35] [blog] labs 2024 - minor grammer fix

---
 .../15/react-labs-what-we-have-been-working-on-february-2024.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 5b96a22d..6bb13517 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -76,7 +76,7 @@ React Server Components, Asset Loading, Document Metadata, and Actions have all
 
 - **Document Metadata**: we added built-in support for rendering [`<title>`](/reference/react-dom/components/title), [`<meta>`](/reference/react-dom/components/meta), and metadata [`<link>`](/reference/react-dom/components/link) tags anywhere in your component tree. These work the same way in all environments, including fully client-side code, SSR, and RSC. This provides built-in support for features pioneered by libraries like [React Helmet](https://github.com/nfl/react-helmet).
 
-- **Asset Loading**: we integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like [`<style>`](/reference/react-dom/components/style), [`<link>`](/reference/react-dom/components/link), and [`<script>`](/reference/react-dom/components/script) are ready to be displayed. We’ve also added new [Resource Loading APIs](/reference/react-dom#resource-preloading-apis) like `preload` and `preinit` give greater control for when a resource should load and initialize.
+- **Asset Loading**: we integrated Suspense with the loading lifecycle of resources such as stylesheets, fonts, and scripts so that React takes them into account to determine whether the content in elements like [`<style>`](/reference/react-dom/components/style), [`<link>`](/reference/react-dom/components/link), and [`<script>`](/reference/react-dom/components/script) are ready to be displayed. We’ve also added new [Resource Loading APIs](/reference/react-dom#resource-preloading-apis) like `preload` and `preinit` to provide greater control for when a resource should load and initialize.
 
 - **Actions**: As shared above, we've added Actions to manage sending data from the client to the server. You can add `action` to elements like [`<form/>`](/reference/react-dom/components/form), access the status with [`useFormStatus`](/reference/react-dom/hooks/useFormStatus), handle the result with [`useFormState`](/reference/react-dom/hooks/useFormState), and optimistically update the UI with [`useOptimistic`](/reference/react/useOptimistic).
 

From 1c06fccad309b128761b98db5b749c44ac82564e Mon Sep 17 00:00:00 2001
From: Robin Heinze <robin.m.heinze@gmail.com>
Date: Fri, 16 Feb 2024 22:32:52 -0800
Subject: [PATCH 16/35] Update conferences.md to include Chain React 2024
 (#6640)

---
 src/content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index ef330187..8d137021 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -65,6 +65,11 @@ July 04 & 05, 2024. Bangalore, India (In-person event)
 
 [Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
 
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

From 74c33a16dab86b3da1412ed5d695a8788ecba425 Mon Sep 17 00:00:00 2001
From: Stephan de Vries <stephan281094@users.noreply.github.com>
Date: Sat, 17 Feb 2024 06:35:37 +0000
Subject: [PATCH 17/35] Fix typos in latest blog post (#6636)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"React Complier"          → "React Compiler"
"and alternative history" → "an alternative history"
---
 .../react-labs-what-we-have-been-working-on-february-2024.md  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 6bb13517..03fc85c3 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -104,9 +104,9 @@ Activity is still under research and our remaining work is to finalize the primi
 
 In addition to this update, our team has presented at conferences and made appearances on podcasts to speak more on our work and answer questions.
 
-- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Complier at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
+- [Sathya Gunasekaran](/community/team#sathya-gunasekaran) spoke about the React Compiler at the [React India](https://www.youtube.com/watch?v=kjOacmVsLSE) conference
 
-- [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled “React from Another Dimension” which explores and alternative history of how React Server Components and Actions could have been created
+- [Dan Abramov](/community/team#dan-abramov) gave a talk at [RemixConf](https://www.youtube.com/watch?v=zMf_xeGPn6s) titled “React from Another Dimension” which explores an alternative history of how React Server Components and Actions could have been created
 
 - [Dan Abramov](/community/team#dan-abramov) was interviewed on [the Changelog’s JS Party podcast](https://changelog.com/jsparty/311) about React Server Components
 

From 156765fc763bb85a7a6dc5eb1bd155801bbebaee Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 17 Feb 2024 16:42:14 -0500
Subject: [PATCH 18/35] Fix localhost link in script documentation (#6642)

---
 src/content/reference/react-dom/components/script.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index a2c4668c..fc4b0127 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -68,7 +68,7 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](http://localhost:3000/reference/react/Suspense) while the script is loading.
+React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
 
 To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
 
@@ -146,4 +146,4 @@ export default function Page() {
 }
 ```
 
-</SandpackWithHTMLOutput>
\ No newline at end of file
+</SandpackWithHTMLOutput>

From 35530eea4bb8ba2567c1f57f1ccf730cc89b76de Mon Sep 17 00:00:00 2001
From: Felipe Oliveira <felipe.boliveira@outlook.com>
Date: Sun, 18 Feb 2024 15:59:25 -0300
Subject: [PATCH 19/35] [typo] syntax looks wrong #6633 (#6641)

---
 src/content/reference/react-dom/components/style.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index 0c6d8e59..238a26d8 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -14,7 +14,7 @@ React's extensions to `<style>` are currently only available in React's canary a
 The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you add inline CSS stylesheets to your document.
 
 ```js
-<style> p { color: red; } </style>
+<style>{` p { color: red; } `}</style>
 ```
 
 </Intro>
@@ -30,7 +30,7 @@ The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/d
 To add inline styles to your document, render the [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). You can render `<style>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical styles.
 
 ```js
-<style> p { color: red; } </style>
+<style>{` p { color: red; } `}</style>
 ```
 
 [See more examples below.](#usage)

From c9369f47dc034016255dedcf8bde39410b60adbd Mon Sep 17 00:00:00 2001
From: Szymon Rybczak <szymon.rybczak@gmail.com>
Date: Tue, 20 Feb 2024 19:58:18 +0100
Subject: [PATCH 20/35] feat(conferences): add React Universe Conf 2024 (#6649)

---
 src/content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 8d137021..7d79c733 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,6 +10,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
 ### React Paris 2024 {/*react-paris-2024*/}
 March 22, 2024. In-person in Paris, France + Remote (hybrid)
 

From e16634aaaa72d7d7dc8e6072611bd41258c7469c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 20 Feb 2024 21:13:33 +0100
Subject: [PATCH 21/35] Add options to call signature of react-dom/server
 legacy APIs (#6477)

* Update renderToNodeStream.md

* Update renderToStaticMarkup.md

* Update renderToStaticNodeStream.md

* Update renderToString.md
---
 src/content/reference/react-dom/server/renderToNodeStream.md  | 4 ++--
 .../reference/react-dom/server/renderToStaticMarkup.md        | 4 ++--
 .../reference/react-dom/server/renderToStaticNodeStream.md    | 4 ++--
 src/content/reference/react-dom/server/renderToString.md      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md
index fd2464b9..aa2c2e8f 100644
--- a/src/content/reference/react-dom/server/renderToNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -13,7 +13,7 @@ This API will be removed in a future major version of React. Use [`renderToPipea
 `renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
 
 ```js
-const stream = renderToNodeStream(reactNode)
+const stream = renderToNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const stream = renderToNodeStream(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToNodeStream(reactNode)` {/*rendertonodestream*/}
+### `renderToNodeStream(reactNode, options?)` {/*rendertonodestream*/}
 
 On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response.
 
diff --git a/src/content/reference/react-dom/server/renderToStaticMarkup.md b/src/content/reference/react-dom/server/renderToStaticMarkup.md
index 607affd9..2b9178d5 100644
--- a/src/content/reference/react-dom/server/renderToStaticMarkup.md
+++ b/src/content/reference/react-dom/server/renderToStaticMarkup.md
@@ -7,7 +7,7 @@ title: renderToStaticMarkup
 `renderToStaticMarkup` renders a non-interactive React tree to an HTML string.
 
 ```js
-const html = renderToStaticMarkup(reactNode)
+const html = renderToStaticMarkup(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const html = renderToStaticMarkup(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToStaticMarkup(reactNode)` {/*rendertostaticmarkup*/}
+### `renderToStaticMarkup(reactNode, options?)` {/*rendertostaticmarkup*/}
 
 On the server, call `renderToStaticMarkup` to render your app to HTML.
 
diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index 47ef74c3..f12b6da2 100644
--- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -7,7 +7,7 @@ title: renderToStaticNodeStream
 `renderToStaticNodeStream` renders a non-interactive React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams)
 
 ```js
-const stream = renderToStaticNodeStream(reactNode)
+const stream = renderToStaticNodeStream(reactNode, options?)
 ```
 
 </Intro>
@@ -18,7 +18,7 @@ const stream = renderToStaticNodeStream(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToStaticNodeStream(reactNode)` {/*rendertostaticnodestream*/}
+### `renderToStaticNodeStream(reactNode, options?)` {/*rendertostaticnodestream*/}
 
 On the server, call `renderToStaticNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams).
 
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index e1269294..d9f1bdba 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -13,7 +13,7 @@ title: renderToString
 `renderToString` renders a React tree to an HTML string.
 
 ```js
-const html = renderToString(reactNode)
+const html = renderToString(reactNode, options?)
 ```
 
 </Intro>
@@ -24,7 +24,7 @@ const html = renderToString(reactNode)
 
 ## Reference {/*reference*/}
 
-### `renderToString(reactNode)` {/*rendertostring*/}
+### `renderToString(reactNode, options?)` {/*rendertostring*/}
 
 On the server, call `renderToString` to render your app to HTML.
 

From af289c30900d3515f916eca4ca98c4253f5bc1d2 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Tue, 20 Feb 2024 14:30:08 -0800
Subject: [PATCH 22/35] Update team page (#6652)

---
 src/content/community/team.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/community/team.md b/src/content/community/team.md
index 0c6c63a8..9ef95d64 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -22,7 +22,7 @@ Current members of the React team are listed in alphabetical order below.
     Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports.
 </TeamMember>
 
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Engineer at Meta">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Independent Engineer">
     Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
 </TeamMember>
 

From 5398b47260cb47baf1edcf5f6634e30b5014015f Mon Sep 17 00:00:00 2001
From: Victoria Quirante <victoria@limenius.com>
Date: Wed, 21 Feb 2024 12:23:59 +0100
Subject: [PATCH 23/35] Add React Alicante to conferences.md (#6655)

---
 src/content/community/conferences.md | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 7d79c733..44e5e4fc 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -10,11 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Universe Conf 2024 {/*react-universe-conf-2024*/}
-September 5-6, 2024. Wrocław, Poland.
-
-[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
-
 ### React Paris 2024 {/*react-paris-2024*/}
 March 22, 2024. In-person in Paris, France + Remote (hybrid)
 
@@ -75,6 +70,16 @@ July 17-19, 2024. In-person in Portland, OR, USA
 
 [Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
 
+### React Universe Conf 2024 {/*react-universe-conf-2024*/}
+September 5-6, 2024. Wrocław, Poland.
+
+[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
+
+### React Alicante 2024 {/*react-alicante-2024*/}
+September 19-21, 2024. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

From 93aec2784b26e0b0a69cb587fd59e35554afb774 Mon Sep 17 00:00:00 2001
From: Tomasz Wysocki <121371814+tomaszwysocki@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:02:51 +0100
Subject: [PATCH 24/35] Remove redundant suggestion (#6643)

Removed the redundant alternative state management suggestion. The documentation
already emphasizes the elimination of duplication by advising to hold the
selected ID in state, making the alternative suggestion unnecessary.
---
 src/content/learn/choosing-the-state-structure.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md
index c3218589..5be2b4d3 100644
--- a/src/content/learn/choosing-the-state-structure.md
+++ b/src/content/learn/choosing-the-state-structure.md
@@ -554,8 +554,6 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Alternatively, you may hold the selected index in state.)
-
 The state used to be duplicated like this:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`

From 2ad51d921bb78c0a79998f92061f9d63c0a8cf21 Mon Sep 17 00:00:00 2001
From: Sahil Mhapsekar <saheel.mhapsekar@gmail.com>
Date: Fri, 23 Feb 2024 10:29:02 +0530
Subject: [PATCH 25/35] feat(conferences): add The GeekConf 2024 (#6654)

---
 src/content/community/conferences.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md
index 44e5e4fc..a28d6084 100644
--- a/src/content/community/conferences.md
+++ b/src/content/community/conferences.md
@@ -70,6 +70,11 @@ July 17-19, 2024. In-person in Portland, OR, USA
 
 [Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
 
+### The Geek Conf 2024 {/*the-geek-conf-2024*/}
+July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)
+
+[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)
+
 ### React Universe Conf 2024 {/*react-universe-conf-2024*/}
 September 5-6, 2024. Wrocław, Poland.
 
@@ -80,6 +85,7 @@ September 19-21, 2024. Alicante, Spain.
 
 [Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
 
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

From a853e69261022734c238fd2199a90f23d1548c95 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Sat, 24 Feb 2024 10:35:53 -0500
Subject: [PATCH 26/35] Remove useMemo from useFormStatus example (#6658)

* Remove useMemo from useFormStatus example

* nits
---
 .../react-dom/hooks/useFormStatus.md          | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md
index 8733ec0c..70feceae 100644
--- a/src/content/reference/react-dom/hooks/useFormStatus.md
+++ b/src/content/reference/react-dom/hooks/useFormStatus.md
@@ -182,36 +182,16 @@ import {useFormStatus} from 'react-dom';
 export default function UsernameForm() {
   const {pending, data} = useFormStatus();
 
-  const [showSubmitted, setShowSubmitted] = useState(false);
-  const submittedUsername = useRef(null);
-  const timeoutId = useRef(null);
-
-  useMemo(() => {
-    if (pending) {
-      submittedUsername.current = data?.get('username');
-      if (timeoutId.current != null) {
-        clearTimeout(timeoutId.current);
-      }
-
-      timeoutId.current = setTimeout(() => {
-        timeoutId.current = null;
-        setShowSubmitted(false);
-      }, 2000);
-      setShowSubmitted(true);
-    }
-  }, [pending, data]);
-
   return (
-    <>
-      <label>Request a Username: </label><br />
-      <input type="text" name="username" />
+    <div>
+      <h3>Request a Username: </h3>
+      <input type="text" name="username" disabled={pending}/>
       <button type="submit" disabled={pending}>
-        {pending ? 'Submitting...' : 'Submit'}
+        Submit
       </button>
-      {showSubmitted ? (
-        <p>Submitted request for username: {submittedUsername.current}</p>
-      ) : null}
-    </>
+      <br />
+      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
+    </div>
   );
 }
 ```
@@ -219,10 +199,15 @@ export default function UsernameForm() {
 ```js src/App.js
 import UsernameForm from './UsernameForm';
 import { submitForm } from "./actions.js";
+import {useRef} from 'react';
 
 export default function App() {
+  const ref = useRef(null);
   return (
-    <form action={submitForm}>
+    <form ref={ref} action={async (formData) => {
+      await submitForm(formData);
+      ref.current.reset();
+    }}>
       <UsernameForm />
     </form>
   );
@@ -231,8 +216,22 @@ export default function App() {
 
 ```js src/actions.js hidden
 export async function submitForm(query) {
-    await new Promise((res) => setTimeout(res, 1000));
+    await new Promise((res) => setTimeout(res, 2000));
+}
+```
+
+```css
+p {
+    height: 14px;
+    padding: 0;
+    margin: 2px 0 0 0 ;
+    font-size: 14px
+}
+
+button {
+    margin-left: 2px;
 }
+
 ```
 
 ```json package.json hidden

From 081d1008dd1eebffb9550a3ff623860a7d977acf Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Sat, 24 Feb 2024 16:11:15 +0000
Subject: [PATCH 27/35] fix(sandpack): clear up bundler timeout when there's a
 syntax error (#6659)

* fix: Update @codesandbox/sandpack-react version to 2.13.1

* fix: Updated the bundlerURL  to use a new URL
---
 package.json                                 |  2 +-
 src/components/MDX/Sandpack/SandpackRoot.tsx |  2 +-
 yarn.lock                                    | 50 +++++++++-----------
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f75ffbb2..274c2506 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.6.0",
+    "@codesandbox/sandpack-react": "2.13.1",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index d47fd903..a47fa686 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />
diff --git a/yarn.lock b/yarn.lock
index f7d63ee5..8b4000ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -611,29 +611,29 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/nodebox@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc"
-  integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ==
+"@codesandbox/nodebox@0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d"
+  integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==
   dependencies:
-    outvariant "^1.3.0"
+    outvariant "^1.4.0"
     strict-event-emitter "^0.4.3"
 
-"@codesandbox/sandpack-client@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193"
-  integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw==
+"@codesandbox/sandpack-client@^2.13.0":
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27"
+  integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g==
   dependencies:
-    "@codesandbox/nodebox" "0.1.4"
+    "@codesandbox/nodebox" "0.1.8"
     buffer "^6.0.3"
     dequal "^2.0.2"
-    outvariant "1.3.0"
+    outvariant "1.4.0"
     static-browser-server "1.0.3"
 
-"@codesandbox/sandpack-react@2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2"
-  integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ==
+"@codesandbox/sandpack-react@2.13.1":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09"
+  integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw==
   dependencies:
     "@codemirror/autocomplete" "^6.4.0"
     "@codemirror/commands" "^6.1.3"
@@ -643,13 +643,12 @@
     "@codemirror/language" "^6.3.2"
     "@codemirror/state" "^6.2.0"
     "@codemirror/view" "^6.7.1"
-    "@codesandbox/sandpack-client" "^2.6.0"
+    "@codesandbox/sandpack-client" "^2.13.0"
     "@lezer/highlight" "^1.1.3"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     anser "^2.1.1"
     clean-set "^1.1.2"
-    codesandbox-import-util-types "^2.2.3"
     dequal "^2.0.2"
     escape-carriage "^1.3.1"
     lz-string "^1.4.4"
@@ -1769,11 +1768,6 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-codesandbox-import-util-types@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
-  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
-
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -4635,16 +4629,16 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-outvariant@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9"
-  integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ==
-
-outvariant@^1.3.0:
+outvariant@1.4.0, outvariant@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e"
   integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
 
+outvariant@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066"
+  integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"

From 9ceb0572c9b765395684ed958feba3afb55a2503 Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Mon, 26 Feb 2024 23:41:23 +0530
Subject: [PATCH 28/35] =?UTF-8?q?Revert=20"fix(sandpack):=20clear=20up=20b?=
 =?UTF-8?q?undler=20timeout=20when=20there's=20a=20syntax=20error=20(?=
 =?UTF-8?q?=E2=80=A6"=20(#6663)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 081d1008dd1eebffb9550a3ff623860a7d977acf.
---
 package.json                                 |  2 +-
 src/components/MDX/Sandpack/SandpackRoot.tsx |  2 +-
 yarn.lock                                    | 50 +++++++++++---------
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 274c2506..f75ffbb2 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.13.1",
+    "@codesandbox/sandpack-react": "2.6.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index a47fa686..d47fd903 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />
diff --git a/yarn.lock b/yarn.lock
index 8b4000ce..f7d63ee5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -611,29 +611,29 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/nodebox@0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d"
-  integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==
+"@codesandbox/nodebox@0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc"
+  integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ==
   dependencies:
-    outvariant "^1.4.0"
+    outvariant "^1.3.0"
     strict-event-emitter "^0.4.3"
 
-"@codesandbox/sandpack-client@^2.13.0":
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.0.tgz#c4e12628a3aceb4a2c99c501bea691b4276eab27"
-  integrity sha512-1rOLj9wkbBd3RV6/zRq+IV52egy22RQMKDTtdR+lQzy87uj0tlbYjAwtUZSjkioHlj6U8Y82uWLf71nvFIxE0g==
+"@codesandbox/sandpack-client@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193"
+  integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw==
   dependencies:
-    "@codesandbox/nodebox" "0.1.8"
+    "@codesandbox/nodebox" "0.1.4"
     buffer "^6.0.3"
     dequal "^2.0.2"
-    outvariant "1.4.0"
+    outvariant "1.3.0"
     static-browser-server "1.0.3"
 
-"@codesandbox/sandpack-react@2.13.1":
-  version "2.13.1"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.1.tgz#ba69a227d0c5157bb48685a02fefc0baa83bdc09"
-  integrity sha512-R8oGO4QHHWTyA7r6NWHtBakizgX+rl/Rc6cbQunXGNm4vV/lqqU4NS+MVp2rXA+c8DifOLi1wA2wUZUN//Z9bw==
+"@codesandbox/sandpack-react@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2"
+  integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ==
   dependencies:
     "@codemirror/autocomplete" "^6.4.0"
     "@codemirror/commands" "^6.1.3"
@@ -643,12 +643,13 @@
     "@codemirror/language" "^6.3.2"
     "@codemirror/state" "^6.2.0"
     "@codemirror/view" "^6.7.1"
-    "@codesandbox/sandpack-client" "^2.13.0"
+    "@codesandbox/sandpack-client" "^2.6.0"
     "@lezer/highlight" "^1.1.3"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     anser "^2.1.1"
     clean-set "^1.1.2"
+    codesandbox-import-util-types "^2.2.3"
     dequal "^2.0.2"
     escape-carriage "^1.3.1"
     lz-string "^1.4.4"
@@ -1768,6 +1769,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+codesandbox-import-util-types@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
+  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -4629,16 +4635,16 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-outvariant@1.4.0, outvariant@^1.3.0:
+outvariant@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9"
+  integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ==
+
+outvariant@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e"
   integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
 
-outvariant@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066"
-  integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==
-
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"

From 41b1bb3b7c440c108f4fa95fbca172564feda10f Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Mon, 26 Feb 2024 19:54:43 +0000
Subject: [PATCH 29/35] Update Dan's twitter link

---
 src/content/community/team.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/community/team.md b/src/content/community/team.md
index 9ef95d64..2ea4e79b 100644
--- a/src/content/community/team.md
+++ b/src/content/community/team.md
@@ -22,7 +22,7 @@ Current members of the React team are listed in alphabetical order below.
     Andrey started his career as a designer and then gradually transitioned into web development. After joining the React Data team at Meta he worked on adding an incremental JavaScript compiler to Relay, and then later on, worked on removing the same compiler from Relay. Outside of work, Andrey likes to play music and engage in various sports.
 </TeamMember>
 
-<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov" title="Independent Engineer">
+<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
     Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
 </TeamMember>
 

From 6d8e094d33a790b587f776377d6dddf6e91c60c6 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 27 Feb 2024 19:29:37 +0000
Subject: [PATCH 30/35] fix: Update @codesandbox/sandpack-react version to
 2.13.4 (#6664)

* fix: Update @codesandbox/sandpack-react version to 2.13.3

* fix: Fixed bundlerURL  to use the correct URL

* fix: Update @codesandbox/sandpack-react to version 2.13.4

* style: Hide span element in sp-icon-standalone when loading
---
 package.json                                 |  2 +-
 src/components/MDX/Sandpack/SandpackRoot.tsx |  2 +-
 src/styles/sandpack.css                      |  4 ++
 yarn.lock                                    | 50 +++++++++-----------
 4 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index f75ffbb2..8fe0f4ca 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.6.0",
+    "@codesandbox/sandpack-react": "2.13.4",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx
index d47fd903..a47fa686 100644
--- a/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -88,7 +88,7 @@ function SandpackRoot(props: SandpackProps) {
           autorun,
           initMode: 'user-visible',
           initModeObserverOptions: {rootMargin: '1400px 0px'},
-          bundlerURL: 'https://1e4ad8f7.sandpack-bundler-4bw.pages.dev',
+          bundlerURL: 'https://786946de.sandpack-bundler-4bw.pages.dev',
           logLevel: SandpackLogLevel.None,
         }}>
         <CustomPreset providedFiles={Object.keys(files)} />
diff --git a/src/styles/sandpack.css b/src/styles/sandpack.css
index dee08769..d909f722 100644
--- a/src/styles/sandpack.css
+++ b/src/styles/sandpack.css
@@ -608,3 +608,7 @@ html.dark .sp-devtools > div {
     }
   }
 }
+
+.sp-loading .sp-icon-standalone span {
+  display: none;
+}
diff --git a/yarn.lock b/yarn.lock
index f7d63ee5..9baa4495 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -611,29 +611,29 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codesandbox/nodebox@0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.4.tgz#1c9ed4caf6cda764500aec3d46b245e2e9b88ccc"
-  integrity sha512-+MR7JibjGjTRDmyQbL8Mliej6wakQP7q99+wGL/nOzd0Q3s+YWGQfv0QpYKbdMClKUTFJGvwzwOeqHVTkpWNCQ==
+"@codesandbox/nodebox@0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d"
+  integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==
   dependencies:
-    outvariant "^1.3.0"
+    outvariant "^1.4.0"
     strict-event-emitter "^0.4.3"
 
-"@codesandbox/sandpack-client@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.6.0.tgz#a266ac49843a0c3263ac065daaba473cb9565193"
-  integrity sha512-JFCe+MU+5E+nXazrNK1uS/zLV5l4UNkYQx7AjF9sJ5ZmUlshz1HRDiK/Tdp6W+3ahcSERF3dcYPCf46LJF8Yvw==
+"@codesandbox/sandpack-client@^2.13.2":
+  version "2.13.2"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.13.2.tgz#8e573e96d341d3284ce579a71c6c57f16aefc80e"
+  integrity sha512-uAuxQOF7p8y4m7H0ojedDcWRf62xVK7UIYIJoX5LkhcV0SW1BTXcRkVNuR0/MSCSv+Og1dBeV8+Xpye9PX0quA==
   dependencies:
-    "@codesandbox/nodebox" "0.1.4"
+    "@codesandbox/nodebox" "0.1.8"
     buffer "^6.0.3"
     dequal "^2.0.2"
-    outvariant "1.3.0"
+    outvariant "1.4.0"
     static-browser-server "1.0.3"
 
-"@codesandbox/sandpack-react@2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.6.0.tgz#2c2d98b50c9db462a32831071de7e5e710d000c2"
-  integrity sha512-zSeJXzaVt96aIFfkyr+bMKBjV2k3hVcX+j1+aBRIOCpHhTrbszPesUmcE3yNTzGqqQfX/JnIJNRmeqFKmSLjTQ==
+"@codesandbox/sandpack-react@2.13.4":
+  version "2.13.4"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.4.tgz#d079da898e54a5546cfbeea13e4c3549b20f58a6"
+  integrity sha512-lgfcOwWAA+JKztLL5fwZ89389WvBMBl2R2BwE+RfnYKLIfgZ2UGH2Kifly4pam2iFqIzxPER7rYZJh/keSJQbg==
   dependencies:
     "@codemirror/autocomplete" "^6.4.0"
     "@codemirror/commands" "^6.1.3"
@@ -643,13 +643,12 @@
     "@codemirror/language" "^6.3.2"
     "@codemirror/state" "^6.2.0"
     "@codemirror/view" "^6.7.1"
-    "@codesandbox/sandpack-client" "^2.6.0"
+    "@codesandbox/sandpack-client" "^2.13.2"
     "@lezer/highlight" "^1.1.3"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     anser "^2.1.1"
     clean-set "^1.1.2"
-    codesandbox-import-util-types "^2.2.3"
     dequal "^2.0.2"
     escape-carriage "^1.3.1"
     lz-string "^1.4.4"
@@ -1769,11 +1768,6 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
-codesandbox-import-util-types@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-2.2.3.tgz#b354b2f732ad130e119ebd9ead3bda3be5981a54"
-  integrity sha512-Qj00p60oNExthP2oR3vvXmUGjukij+rxJGuiaKM6tyUmSyimdZsqHI/TUvFFClAffk9s7hxGnQgWQ8KCce27qQ==
-
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -4635,16 +4629,16 @@ os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-outvariant@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.3.0.tgz#c39723b1d2cba729c930b74bf962317a81b9b1c9"
-  integrity sha512-yeWM9k6UPfG/nzxdaPlJkB2p08hCg4xP6Lx99F+vP8YF7xyZVfTmJjrrNalkmzudD4WFvNLVudQikqUmF8zhVQ==
-
-outvariant@^1.3.0:
+outvariant@1.4.0, outvariant@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e"
   integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
 
+outvariant@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.2.tgz#f54f19240eeb7f15b28263d5147405752d8e2066"
+  integrity sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"

From 6e650f9dc656f9670d1d7cebe1e6a7cf19e762de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s?= <72570859+tomihq@users.noreply.github.com>
Date: Thu, 29 Feb 2024 08:37:35 -0300
Subject: [PATCH 31/35] update: "Configuring TypeScript" link for Next.js App
 Directory - to updated docs (#6669)

---
 src/content/learn/typescript.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index 034ac0d4..c2b1a994 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -22,7 +22,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 
 All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
 
-- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
+- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
 - [Gatsby](https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/)
 - [Expo](https://docs.expo.dev/guides/typescript/)

From 6310c8a9d4b414f05fe8d9cb89f63744c9745298 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Fri, 1 Mar 2024 14:38:24 -0500
Subject: [PATCH 32/35] Add /link redirects (#6670)

* Add /link redirects

* Update event pooling redirect
---
 vercel.json | 131 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 131 insertions(+)

diff --git a/vercel.json b/vercel.json
index 5e1fbd32..e337b989 100644
--- a/vercel.json
+++ b/vercel.json
@@ -13,6 +13,137 @@
       "source": "/learn/meet-the-team",
       "destination": "/community/team",
       "permanent": true
+    },
+    {
+      "source": "/link/warning-keys",
+      "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key",
+      "permanent": false
+    },
+
+    {
+      "source": "/link/invalid-hook-call",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/hooks-data-fetching",
+      "destination": "/reference/react/useEffect#fetching-data-with-effects",
+      "permanent": false
+    },
+    {
+      "source": "/link/special-props",
+      "destination": "/warnings/special-props",
+      "permanent": false
+    },
+    {
+      "source": "/link/dangerously-set-inner-html",
+      "destination": "/reference/react-dom/components/common#dangerously-setting-the-inner-html",
+      "permanent": false
+    },
+    {
+      "source": "/link/controlled-components",
+      "destination": "/reference/react-dom/components/input#controlling-an-input-with-a-state-variable",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools",
+      "destination": "/learn/react-developer-tools",
+      "permanent": false
+    },
+    {
+      "source": "/link/invalid-aria-props",
+      "destination": "/warnings/invalid-aria-prop",
+      "permanent": false
+    },
+    {
+      "source": "/link/switch-to-createroot",
+      "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",
+      "permanent": false
+    },
+    {
+      "source": "/link/error-boundaries",
+      "destination": "/reference/react/Component#catching-rendering-errors-with-an-error-boundary",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-find-node",
+      "destination": "/reference/react-dom/findDOMNode#alternatives",
+      "permanent": false
+    },
+    {
+      "source": "/link/rules-of-hooks",
+      "destination": "/warnings/invalid-hook-call-warning",
+      "permanent": false
+    },
+    {
+      "source": "/link/event-pooling",
+      "destination": "https://legacy.reactjs.org/docs/legacy-event-pooling.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/legacy-context",
+      "destination": "https://legacy.reactjs.org/docs/legacy-context.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/crossorigin-error",
+      "destination": "https://legacy.reactjs.org/docs/cross-origin-errors.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-polyfills",
+      "destination": "https://legacy.reactjs.org/docs/javascript-environment-requirements.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/wrap-tests-with-act",
+      "destination": "https://legacy.reactjs.org/docs/test-utils.html#act",
+      "permanent": false
+    },
+    {
+      "source": "/link/refs-must-have-owner",
+      "destination": "https://legacy.reactjs.org/warnings/refs-must-have-owner.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/derived-state",
+      "destination": "https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/strict-mode-string-ref",
+      "destination": "https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs",
+      "permanent": false
+    },
+    {
+      "source": "/link/perf-use-production-build",
+      "destination": "https://legacy.reactjs.org/docs/optimizing-performance.html#use-the-production-build",
+      "permanent": false
+    },
+    {
+      "source": "/link/unsafe-component-lifecycles",
+      "destination": "https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html",
+      "permanent": false
+    },
+    {
+      "source": "/link/test-utils-mock-component",
+      "destination": "https://gist.github.com/bvaughn/fbf41b3f895bf2d297935faa5525eee9",
+      "permanent": false
+    },
+    {
+      "source": "/link/attribute-behavior",
+      "destination": "https://legacy.reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail",
+      "permanent": false
+    },
+    {
+      "source": "/link/react-devtools-faq",
+      "destination": "https://github.com/facebook/react/tree/main/packages/react-devtools#faq",
+      "permanent": false
+    },
+    {
+      "source": "/link/setstate-in-render",
+      "destination": "https://github.com/facebook/react/issues/18178#issuecomment-595846312",
+      "permanent": false
     }
   ],
   "headers": [

From 265fa26e3b39739f06c956140d9acf618c6b4e6b Mon Sep 17 00:00:00 2001
From: Matt Michel <matthew@ninjaPixel.eu>
Date: Sun, 3 Mar 2024 22:26:51 +0000
Subject: [PATCH 33/35] Update small typo in useDeferredValue.md (#6673)

* Update useDeferredValue.md

change text from "re-render in background" to "re-render in the background"

* Update useDeferredValue.md

Change instances of "in background" to "in the background".
---
 src/content/reference/react/useDeferredValue.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/useDeferredValue.md b/src/content/reference/react/useDeferredValue.md
index dcd8f98d..f97bf0a2 100644
--- a/src/content/reference/react/useDeferredValue.md
+++ b/src/content/reference/react/useDeferredValue.md
@@ -40,7 +40,7 @@ function SearchPage() {
 
 #### Returns {/*returns*/}
 
-During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in background with the new value (so it will return the updated value). 
+During the initial render, the returned deferred value will be the same as the value you provided. During updates, React will first attempt a re-render with the old value (so it will return the old value), and then try another re-render in the background with the new value (so it will return the updated value). 
 
 #### Caveats {/*caveats*/}
 
@@ -76,7 +76,7 @@ function SearchPage() {
 
 During the initial render, the <CodeStep step={2}>deferred value</CodeStep> will be the same as the <CodeStep step={1}>value</CodeStep> you provided.
 
-During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in background.
+During updates, the <CodeStep step={2}>deferred value</CodeStep> will "lag behind" the latest <CodeStep step={1}>value</CodeStep>. In particular, React will first re-render *without* updating the deferred value, and then try to re-render with the newly received value in the background.
 
 **Let's walk through an example to see when this is useful.**
 
@@ -508,7 +508,7 @@ You can think of it as happening in two steps:
 
 1. **First, React re-renders with the new `query` (`"ab"`) but with the old `deferredQuery` (still `"a")`.** The `deferredQuery` value, which you pass to the result list, is *deferred:* it "lags behind" the `query` value.
 
-2. **In background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
+2. **In the background, React tries to re-render with *both* `query` and `deferredQuery` updated to `"ab"`.** If this re-render completes, React will show it on the screen. However, if it suspends (the results for `"ab"` have not loaded yet), React will abandon this rendering attempt, and retry this re-render again after the data has loaded. The user will keep seeing the stale deferred value until the data is ready.
 
 The deferred "background" rendering is interruptible. For example, if you type into the input again, React will abandon it and restart with the new value. React will always use the latest provided value.
 
@@ -952,7 +952,7 @@ While these techniques are helpful in some cases, `useDeferredValue` is better s
 
 Unlike debouncing or throttling, it doesn't require choosing any fixed delay. If the user's device is fast (e.g. powerful laptop), the deferred re-render would happen almost immediately and wouldn't be noticeable. If the user's device is slow, the list would "lag behind" the input proportionally to how slow the device is.
 
-Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
+Also, unlike with debouncing or throttling, deferred re-renders done by `useDeferredValue` are interruptible by default. This means that if React is in the middle of re-rendering a large list, but the user makes another keystroke, React will abandon that re-render, handle the keystroke, and then start rendering in the background again. By contrast, debouncing and throttling still produce a janky experience because they're *blocking:* they merely postpone the moment when rendering blocks the keystroke.
 
 If the work you're optimizing doesn't happen during rendering, debouncing and throttling are still useful. For example, they can let you fire fewer network requests. You can also use these techniques together.
 

From 716e8896204aecaaa13a199f9c41998fde62f61f Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Mon, 4 Mar 2024 17:28:18 -0500
Subject: [PATCH 34/35] Add hydration-mismatch link (#6678)

---
 vercel.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/vercel.json b/vercel.json
index e337b989..8d610c26 100644
--- a/vercel.json
+++ b/vercel.json
@@ -55,6 +55,11 @@
       "destination": "/warnings/invalid-aria-prop",
       "permanent": false
     },
+    {
+      "source": "/link/hydration-mismatch",
+      "destination": "/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html",
+      "permanent": false
+    },
     {
       "source": "/link/switch-to-createroot",
       "destination": "/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis",

From 5de85198a3c575d94a395138e3f471cc7172a51c Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Fri, 8 Mar 2024 15:05:50 +0000
Subject: [PATCH 35/35] fix: Update sandpack-react version to 2.13.5 (#6668)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 8fe0f4ca..78775683 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "2.13.4",
+    "@codesandbox/sandpack-react": "2.13.5",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/yarn.lock b/yarn.lock
index 9baa4495..b20c796e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -630,10 +630,10 @@
     outvariant "1.4.0"
     static-browser-server "1.0.3"
 
-"@codesandbox/sandpack-react@2.13.4":
-  version "2.13.4"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.4.tgz#d079da898e54a5546cfbeea13e4c3549b20f58a6"
-  integrity sha512-lgfcOwWAA+JKztLL5fwZ89389WvBMBl2R2BwE+RfnYKLIfgZ2UGH2Kifly4pam2iFqIzxPER7rYZJh/keSJQbg==
+"@codesandbox/sandpack-react@2.13.5":
+  version "2.13.5"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.13.5.tgz#bc4b3fe43b74fdb011f69d3d9a117415110c709e"
+  integrity sha512-MWzh2P/Asck0JSCKY3y7WecdUBBEqB0NFi4p+ohoZMTYqHWTaYfd7nbPlNmGIE1xcGppSZEqPVDjOpAfeQ0zFw==
   dependencies:
     "@codemirror/autocomplete" "^6.4.0"
     "@codemirror/commands" "^6.1.3"