Sync with react.dev @ 50d6991c

.github/workflows/analyze_comment.yml

@@ -6,8 +6,11 @@ on:
     types:
       - completed
 
-permissions: {}
-
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
 jobs:
   comment:
     runs-on: ubuntu-latest

src/components/Layout/HomeContent.js

@@ -875,7 +875,8 @@ function ExampleLayout({
           </div>
           <div
             ref={contentRef}
-            className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center">
+            className="relative mt-0 lg:-my-20 w-full p-2.5 xs:p-5 lg:p-10 flex grow justify-center"
+            dir="ltr">
             {right}
             <div
               className={cn(
@@ -1187,7 +1188,7 @@ async function Talks({ confId }) {
         </CodeBlock>
       }
       right={
-        <NavContext.Provider value={{slug, navigate}}>
+        <NavContext value={{slug, navigate}}>
           <BrowserChrome
             domain="example.com"
             path={'confs/' + slug}
@@ -1207,7 +1208,7 @@ async function Talks({ confId }) {
               </Suspense>
             </ExamplePanel>
           </BrowserChrome>
-        </NavContext.Provider>
+        </NavContext>
       }
     />
   );

src/components/Layout/Page.tsx

@@ -82,11 +82,9 @@ export function Page({
               'max-w-7xl mx-auto',
               section === 'blog' && 'lg:flex lg:flex-col lg:items-center'
             )}>
-            <TocContext.Provider value={toc}>
-              <LanguagesContext.Provider value={languages}>
-                {children}
-              </LanguagesContext.Provider>
-            </TocContext.Provider>
+            <TocContext value={toc}>
+              <LanguagesContext value={languages}>{children}</LanguagesContext>
+            </TocContext>
           </div>
           {!isBlogIndex && (
             <DocsPageFooter

src/components/Layout/TopNav/TopNav.tsx

@@ -266,7 +266,9 @@ export default function TopNav({
               <BrandMenu>
                 <div className="flex items-center">
                   <div className="uwu-visible flex items-center justify-center h-full">
-                    <NextLink href="/">
+                    <NextLink
+                      href="/"
+                      className="active:scale-95 transition-transform">
                       <Image
                         alt="logo by @sawaratsuki1004"
                         title="logo by @sawaratsuki1004"

src/components/MDX/MDXComponents.tsx

@@ -358,7 +358,7 @@ function IllustrationBlock({
     </figure>
   ));
   return (
-    <IllustrationContext.Provider value={isInBlockTrue}>
+    <IllustrationContext value={isInBlockTrue}>
       <div className="relative group before:absolute before:-inset-y-16 before:inset-x-0 my-16 mx-0 2xl:mx-auto max-w-4xl 2xl:max-w-6xl">
         {sequential ? (
           <ol className="mdx-illustration-block flex">
@@ -373,7 +373,7 @@ function IllustrationBlock({
         )}
         <AuthorCredit author={author} authorLink={authorLink} />
       </div>
-    </IllustrationContext.Provider>
+    </IllustrationContext>
   );
 }
 

src/components/MDX/Sandpack/template.ts

@@ -1,7 +1,7 @@
 export const template = {
   '/src/index.js': {
     hidden: true,
-    code: `import React, { StrictMode } from "react";
+    code: `import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./styles.css";
 

src/components/PageHeading.tsx

@@ -27,7 +27,6 @@ function PageHeading({
   tags = [],
   breadcrumbs,
 }: PageHeadingProps) {
-  console.log('version', version);
   return (
     <div className="px-5 sm:px-12 pt-3.5">
       <div className="max-w-4xl ms-0 2xl:mx-auto">

src/components/Seo.tsx

@@ -124,7 +124,14 @@ export const Seo = withRouter(
         )}
         <link
           rel="preload"
-          href="/fonts/Source-Code-Pro-Regular.woff2"
+          href="https://react.dev/fonts/Source-Code-Pro-Regular.woff2"
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+        <link
+          rel="preload"
+          href="https://react.dev/fonts/Source-Code-Pro-Bold.woff2"
           as="font"
           type="font/woff2"
           crossOrigin="anonymous"

src/content/blog/2024/12/05/react-19.md

@@ -410,7 +410,7 @@ New function components will no longer need `forwardRef`, and we will be publish
 
 <Note>
 
-`refs` passed to classes are not passed as props since they reference the component instance.
+`ref`s passed to classes are not passed as props since they reference the component instance.
 
 </Note>
 

src/content/community/conferences.md

@@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland.
 
 [Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)
 
+### React Alicante 2025 {/*react-alicante-2025*/}
+October 2-4, 2025. Alicante, Spain.
+
+[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)
+
 ### React Conf 2025 {/*react-conf-2025*/}
 October 7-8, 2025. Henderson, Nevada, USA and free livestream
 

src/content/community/index.md

@@ -29,4 +29,8 @@ Cada comunidad está constituida por miles de usuarios de React.
 
 ## Noticias {/*news*/}
 
+<<<<<<< HEAD
 Para conocer las últimas noticias sobre React, [sigue **@reactjs** en Twitter](https://twitter.com/reactjs) y el [blog oficial de React](/blog/) en este sitio web.
+=======
+For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91

src/content/community/meetups.md

@@ -38,7 +38,7 @@ title: Reuniones de React
 
 ## Canadá {/*canada*/}
 * [Halifax, NS](https://www.meetup.com/Halifax-ReactJS-Meetup/)
-* [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
+* [Montreal, QC](https://guild.host/react-montreal/)
 * [Vancouver, BC](https://www.meetup.com/ReactJS-Vancouver-Meetup/)
 * [Ottawa, ON](https://www.meetup.com/Ottawa-ReactJS-Meetup/)
 * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/)
@@ -88,6 +88,7 @@ title: Reuniones de React
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Mumbai](https://reactmumbai.dev)
 * [Pune](https://www.meetup.com/ReactJS-and-Friends/)
+* [Rajasthan](https://reactrajasthan.com)
 
 ## Indonesia {/*indonesia*/}
 * [Indonesia](https://www.meetup.com/reactindonesia/)

src/content/learn/build-a-react-app-from-scratch.md

@@ -115,10 +115,17 @@ De manera similar, si confías en que las aplicaciones usen tu framework para di
 
 La división del código por rutas, cuando se integra con el empaquetamiento y la obtención de datos, puede reducir el tiempo de carga inicial de su aplicación y el tiempo que tarda en renderizarse el contenido visible más grande de la aplicación. ([Largest Contentful Paint](https://web.dev/articles/lcp?hl=es-419)).
 
+<<<<<<< HEAD
 Para obtener instrucciones sobre cómo dividir el código, consulte la documentación de su herramienta de compilación:
 - [Optimizaciones de compilación](https://es.vite.dev/guide/features.html#optimizaciones-de-compilacion)
 - [División de código con Parcel](https://parceljs.org/features/code-splitting/)
 - [División de código con Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting)
+=======
+For code-splitting instructions, see your build tool docs:
+- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations)
+- [Parcel code splitting](https://parceljs.org/features/code-splitting/)
+- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting)
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
 ### Mejorar el rendimiento de las aplicaciones {/*improving-application-performance*/}
 

src/content/learn/keeping-components-pure.md

@@ -175,7 +175,7 @@ function Cup({ guest }) {
 }
 
 export default function TeaGathering() {
-  let cups = [];
+  const cups = [];
   for (let i = 1; i <= 12; i++) {
     cups.push(<Cup key={i} guest={i} />);
   }
@@ -245,7 +245,7 @@ Renderizar es un *cálculo*, no debería tratar de "hacer" cosas. ¿Puedes expre
 
 ```js src/Clock.js active
 export default function Clock({ time }) {
-  let hours = time.getHours();
+  const hours = time.getHours();
   if (hours >= 0 && hours <= 6) {
     document.getElementById('time').className = 'night';
   } else {
@@ -307,7 +307,7 @@ Puedes arreglar este componente calculando el `className` e incluirlo en la sali
 
 ```js src/Clock.js active
 export default function Clock({ time }) {
-  let hours = time.getHours();
+  const hours = time.getHours();
   let className;
   if (hours >= 0 && hours <= 6) {
     className = 'night';
@@ -606,14 +606,20 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
+<<<<<<< HEAD
 let initialStories = [
   {id: 0, label: "Historia de Ankit" },
   {id: 1, label: "Historia de Taylor" },
+=======
+const initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // PISTA: Evita que la memoria crezca por siempre mientras lees documentos.
   // Estamos rompiendo nuestras propias reglas aquí.
@@ -702,14 +708,20 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
+<<<<<<< HEAD
 let initialStories = [
   {id: 0, label: "Historia de Ankit" },
   {id: 1, label: "Historia de Taylor" },
+=======
+const initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // PISTA: Evita que la memoria crezca por siempre mientras lees documentos.
   // Estamos rompiendo nuestras propias reglas aquí.
@@ -769,8 +781,13 @@ Como alternativa, podrías crear un _nuevo_ array (copiando el existente) antes
 
 ```js src/StoryTray.js active
 export default function StoryTray({ stories }) {
+<<<<<<< HEAD
   // ¡Copia el array!
   let storiesToDisplay = stories.slice();
+=======
+  // Copy the array!
+  const storiesToDisplay = stories.slice();
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
   // Esto no afecta al array original:
   storiesToDisplay.push({
@@ -794,14 +811,20 @@ export default function StoryTray({ stories }) {
 import { useState, useEffect } from 'react';
 import StoryTray from './StoryTray.js';
 
+<<<<<<< HEAD
 let initialStories = [
   {id: 0, label: "Historia de Ankit" },
   {id: 1, label: "Historia de Taylor" },
+=======
+const initialStories = [
+  {id: 0, label: "Ankit's Story" },
+  {id: 1, label: "Taylor's Story" },
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 ];
 
 export default function App() {
-  let [stories, setStories] = useState([...initialStories])
-  let time = useTime();
+  const [stories, setStories] = useState([...initialStories])
+  const time = useTime();
 
   // PISTA: Evita que la memoria crezca por siempre mientras lees documentos.
   // Estamos rompiendo nuestras propias reglas aquí.

src/content/learn/managing-state.md

@@ -741,9 +741,9 @@ export default function Section({ children }) {
   const level = useContext(LevelContext);
   return (
     <section className="section">
-      <LevelContext.Provider value={level + 1}>
+      <LevelContext value={level + 1}>
         {children}
-      </LevelContext.Provider>
+      </LevelContext>
     </section>
   );
 }
@@ -836,13 +836,11 @@ export function TasksProvider({ children }) {
   );
 
   return (
-    <TasksContext.Provider value={tasks}>
-      <TasksDispatchContext.Provider
-        value={dispatch}
-      >
+    <TasksContext value={tasks}>
+      <TasksDispatchContext value={dispatch}>
         {children}
-      </TasksDispatchContext.Provider>
-    </TasksContext.Provider>
+      </TasksDispatchContext>
+    </TasksContext>
   );
 }
 

src/content/learn/preserving-and-resetting-state.md

@@ -672,7 +672,11 @@ label {
 
 </Sandpack>
 
+<<<<<<< HEAD
 El estado del contador se reinicia cuando se hace clic en la casilla de verificación. Aunque se renderiza un `Counter`, el primer hijo del `div` cambia de `div` a `section`. Cuando el `div` hijo se eliminó del DOM, todo el árbol debajo de él (incluyendo el `Counter` y su estado) se destruyó también.
+=======
+The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
 <DiagramGroup>
 
@@ -2011,7 +2015,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}
@@ -2110,7 +2114,7 @@ export default function ContactList() {
       <label>
         <input
           type="checkbox"
-          value={reverse}
+          checked={reverse}
           onChange={e => {
             setReverse(e.target.checked)
           }}

src/content/learn/referencing-values-with-refs.md

@@ -464,7 +464,11 @@ export default function Toggle() {
 
 #### Arregla el _debounce_ {/*fix-debouncing*/}
 
+<<<<<<< HEAD
 En este ejemplo, todos los controladores de clic usan [el "corte de rebote" o _"debounce"_.](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. Fíjate como el mensaje aparece un segundo después. Si presionas el botón mientras esperas el mensaje, el temporizador se reiniciará. Así que si te mantienes cliqueando el mismo botón rápidamente muchas veces, el mensaje no aparecerá hasta un segundo *después* de que pares de hacer clic. El _debounce_ te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas".
+=======
+In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
 Este ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botón. Esperarías que después de un retraso, podrías ver los mensajes de ambos botones. Pero solo se muestra el mensaje del último botón. El mensaje del primer botón se pierde.
 

src/content/learn/removing-effect-dependencies.md

@@ -1239,7 +1239,11 @@ export default function Timer() {
 
 </Sandpack>
 
+<<<<<<< HEAD
 En lugar de leer `count` dentro del Efecto, pasas a React una instrucción `c => c + 1` ("¡incrementa este número!"). React la aplicará en el próximo renderizado. Y dado que ya no tienes que leer el valor de `count` dentro de tu Efecto, puedes mantener vacío (`[]`) el *array* de dependencias de tu Efecto. Así se evita que tu Efecto recree el intervalo en cada tic.
+=======
+Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
 </Solution>
 

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -820,7 +820,11 @@ export default function ChatRoom({ roomId }) {
   // ...
 ```
 
+<<<<<<< HEAD
 y lo pasas como entrada a otro Hook:
+=======
+and passing it as an input to another Hook:
+>>>>>>> 50d6991ca6652f4bc4c985cf0c0e593864f2cc91
 
 ```js {6}
 export default function ChatRoom({ roomId }) {
@@ -2081,7 +2085,6 @@ Escribe `useInterval` en el archivo `useInterval.js` e impórtalo en el archivo
 <Sandpack>
 
 ```js
-import { useState } from 'react';
 import { useCounter } from './useCounter.js';
 
 export default function Counter() {