Merge pull request #892 from reactjs/sync-fcd00068

Sync with react.dev @ fcd0006

src/components/Layout/Feedback.tsx

@@ -45,13 +45,15 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
+  const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
-    event_category: 'button',
+    event_category: category,
     event_label: window.location.pathname,
-    value: isPositive ? 1 : 0,
+    event_value: value,
   });
 }
 

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -77,7 +77,7 @@ export function SidebarLink({
         {title}{' '}
         {canary && (
           <IconCanary
-            title="This feature is available in the latest Canary"
+            title=" - This feature is available in the latest Canary"
             className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}

src/components/MDX/MDXComponents.tsx

@@ -243,7 +243,7 @@ function Illustration({
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg"
         />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img src={info.src} alt={info.alt} height={info.height} />
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
       </div>
       {info.caption ? (
         <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

src/components/PageHeading.tsx

@@ -34,7 +34,7 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - This feature is available in the latest Canary"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}

src/content/blog/2022/03/08/react-18-upgrade-guide.md

@@ -222,13 +222,11 @@ Para obtener más información, consulta la [explicación detallada sobre la bat
 
 ## Nuevas API para bibliotecas {/*new-apis-for-libraries*/}
 
-En el Grupo de Trabajo de React 18, trabajamos con los
+En el Grupo de Trabajo de React 18, trabajamos con los mantenedores de bibliotecas para crear nuevas API necesarias para admitir la representación concurrente en casos de uso específicos de las bibliotecas, como estilos y almacenes externos. Para admitir React 18, algunas bibliotecas deberán cambiar a una de las siguientes API:
 
- mantenedores de bibliotecas para crear nuevas API necesarias para admitir la representación concurrente en casos de uso específicos de las bibliotecas, como estilos y almacenes externos. Para admitir React 18, algunas bibliotecas deberán cambiar a una de las siguientes API:
+- `useSyncExternalStore` es un nuevo Hook que permite a los almacenes externos admitir lecturas concurrentes forzando que las actualizaciones del almacén sean síncronas. Esta nueva API se recomienda para cualquier biblioteca que se integre con el estado externo a React. Para obtener más información, consulta la publicación general y los detalles de la API de `useSyncExternalStore`.
 
-- `useSyncExternalStore` es un nuevo hook que permite a los almacenes externos admitir lecturas concurrentes forzando que las actualizaciones del almacén sean síncronas. Esta nueva API se recomienda para cualquier biblioteca que se integre con el estado externo a React. Para obtener más información, consulta la publicación general y los detalles de la API de `useSyncExternalStore`.
-
-- `useInsertionEffect` es un nuevo hook que permite a las bibliotecas de CSS-in-JS abordar problemas de rendimiento al inyectar estilos en la representación. A menos que ya hayas creado una biblioteca de CSS-in-JS, no esperamos que uses esto. Este hook se ejecutará después de que el DOM haya sufrido mutaciones, pero antes de que los efectos de diseño lean el nuevo diseño. Esto soluciona un problema que ya existía en React 17 y versiones anteriores, pero es aún más importante en React 18 porque React le da prioridad al navegador durante la representación concurrente, lo que le permite volver a calcular el diseño. Para obtener más información, consulta la [Guía de actualización de bibliotecas para `<style>`](https://github.com/reactwg/react-18/discussions/110).
+- `useInsertionEffect` es un nuevo Hook que permite a las bibliotecas de CSS-in-JS abordar problemas de rendimiento al inyectar estilos en la representación. A menos que ya hayas creado una biblioteca de CSS-in-JS, no esperamos que uses esto. Este Hook se ejecutará después de que el DOM haya sufrido mutaciones, pero antes de que los efectos de diseño lean el nuevo diseño. Esto soluciona un problema que ya existía en React 17 y versiones anteriores, pero es aún más importante en React 18 porque React le da prioridad al navegador durante la representación concurrente, lo que le permite volver a calcular el diseño. Para obtener más información, consulta la [Guía de actualización de bibliotecas para `<style>`](https://github.com/reactwg/react-18/discussions/110).
 
 React 18 también introduce nuevas API para la representación concurrente, como `startTransition`, `useDeferredValue` y `useId`, de las cuales compartimos más detalles en la publicación de lanzamiento.
 

src/content/blog/2022/03/29/react-v18.md

@@ -96,6 +96,7 @@ setTimeout(() => {
   setFlag(f => !f);
   // React se renderizará dos veces, una vez por cada actualización de estado (sin agrupación).
 }, 1000);
+
 // Después: las actualizaciones dentro de timeouts, promesas,
 // controladores de eventos nativos o cualquier otro evento se agrupan.
 setTimeout(() => {
@@ -137,8 +138,8 @@ startTransition(() => {
 
 Las actualizaciones envueltas en startTransition se manejan como no urgentes y se interrumpirán si llegan actualizaciones más urgentes, como clics o pulsaciones de teclas. Si una transición se interrumpe por el usuario (por ejemplo, al escribir varios caracteres seguidos), React descartará el trabajo de renderizado obsoleto que no se completó y solo renderizará la última actualización.
 
-* `useTransition`: un gancho (hook) para iniciar transiciones, que incluya un valor para rastrear el estado pendiente.
-* `startTransition`: un método para iniciar transiciones cuando el gancho (hook) no es utilizado.
+* `useTransition`: un Hook para iniciar transiciones, que incluye un valor para rastrear el estado pendiente.
+* `startTransition`: un método para iniciar transiciones cuando no se puede utilizar el Hook.
 
 (Las transiciones optarán por el renderizado concurrente, lo cual permite interrumpir la actualización. Si el contenido se suspende de nuevo, las transiciones también indican a React que continúe mostrando el contenido actual mientras renderiza el contenido de la transición en segundo plano. Consulta [Suspense RFC](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) para obtener más información).
 
@@ -225,7 +226,7 @@ Con el modo estricto (Strict Mode) en React 18, React simulará el desmontaje y
 
 #### useId {/*useid*/}
 
-`useId` es un nuevo gancho (hook) para generar IDs unicos tanto en el cliente como en el servidor, evitando desajustes en la hidratación. Es especialmente útil para bibliotecas de componentes que se integran con API de accesibilidad que requieren identificadores únicos. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 debido a cómo el nuevo renderizador de servidor en streaming entrega el HTML sin un orden específico. [Consulta la documentación](/reference/react/useId).
+`useId` es un nuevo Hook para generar IDs únicos tanto en el cliente como en el servidor, evitando desajustes en la hidratación. Es especialmente útil para bibliotecas de componentes que se integran con API de accesibilidad que requieren identificadores únicos. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 debido a cómo el nuevo renderizador de servidor en streaming entrega el HTML sin un orden específico. [Consulta la documentación](/reference/react/useId).
 
 > Note
 >
@@ -241,15 +242,15 @@ Con el modo estricto (Strict Mode) en React 18, React simulará el desmontaje y
 
 #### useSyncExternalStore {/*usesyncexternalstore*/}
 
-`useSyncExternalStore` es un nuevo hook que permite a las tiendas externas admitir lecturas concurrentes al forzar que las actualizaciones de la tienda sean síncronas. Elimina la necesidad de usar useEffect al implementar suscripciones a fuentes de datos externas, y se recomienda para cualquier biblioteca que se integre con un estado externo a React. [Consulte la documentación aquí](/reference/react/useSyncExternalStore).
+`useSyncExternalStore` es un nuevo Hook que permite a las tiendas externas admitir lecturas concurrentes al forzar que las actualizaciones de la tienda sean síncronas. Elimina la necesidad de usar useEffect al implementar suscripciones a fuentes de datos externas, y se recomienda para cualquier biblioteca que se integre con un estado externo a React. [Consulte la documentación aquí](/reference/react/useSyncExternalStore).
 
 > Note
 >
 > `useSyncExternalStore` está destinado a ser utilizado por bibliotecas, no por el código de aplicación.
 
 #### useInsertionEffect {/*useinsertioneffect*/}
 
-`useInsertionEffect`  es un nuevo hook que permite a las bibliotecas de CSS-in-JS abordar problemas de rendimiento al inyectar estilos durante el renderizado. A menos que ya hayas construido una biblioteca de CSS-in-JS, no esperamos que nunca lo utilices. Este hook se ejecutará después de que el DOM haya sido mutado, pero antes de que los efectos de diseño (layout effects) lean el nuevo diseño. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 porque React cede al navegador durante el renderizado concurrente, dándole la oportunidad de recalcular el diseño. [Consulta la documentación aquí](/reference/react/useInsertionEffect).
+`useInsertionEffect`  es un nuevo Hook que permite a las bibliotecas de CSS-in-JS abordar problemas de rendimiento al inyectar estilos durante el renderizado. A menos que ya hayas construido una biblioteca de CSS-in-JS, no esperamos que nunca lo utilices. Este Hook se ejecutará después de que el DOM haya sido mutado, pero antes de que los efectos de diseño (layout effects) lean el nuevo diseño. Esto resuelve un problema que ya existe en React 17 y versiones anteriores, pero es aún más importante en React 18 porque React cede al navegador durante el renderizado concurrente, dándole la oportunidad de recalcular el diseño. [Consulta la documentación aquí](/reference/react/useInsertionEffect).
 
 > Note
 >
@@ -332,7 +333,6 @@ Consulta [Cómo Actualizar a React 18](/blog/2022/03/08/react-18-upgrade-guide)
 
 * Añadir soporte a Server Context. ([#23244](https://github.com/facebook/react/pull/23244)  por [@salazarm](https://github.com/salazarm))
 * Añadir soporte a `lazy`. ([#24068](https://github.com/facebook/react/pull/24068)  por [@gnoff](https://github.com/gnoff))
-* Actualizar insersiones de webpack para webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  por [@michenly](https://github.com/michenly))
+* Actualizar inserciones de webpack para webpack 5 ([#22739](https://github.com/facebook/react/pull/22739)  por [@michenly](https://github.com/michenly))
 * Corregir un error en el cargador de Node. ([#22537](https://github.com/facebook/react/pull/22537)  por [@btea](https://github.com/btea))
 * Usar `globalThis` en lugar de `window` para entornos de borde. ([#22777](https://github.com/facebook/react/pull/22777)  por [@huozhi](https://github.com/huozhi))
-

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -28,7 +28,7 @@ Estamos trabajando en colaboración con Vercel y Shopify para unificar el soport
 
 ## Carga de recursos {/*asset-loading*/}
 
-Actualmente, los recursos como scripts, estilos externos, fuentes e imágenes generalmente se precargan y cargan utilizando sistemas externos. Esto puede dificultar la coordinación en nuevos entornos como la transmisión de datos, los componentes del servidor y otros. Estamos evaluando la posibilidad de agregar APIs para precargar y cargar recursos externos sin duplicaciones a través de APIs de React que funcionen en todos los entornos de React.
+Actualmente, los recursos como scripts, estilos externos, fuentes e imágenes generalmente se precargan y cargan utilizando sistemas externos. Esto puede dificultar la coordinación en nuevos entornos como la transmisión de datos, los Componentes del Servidor y otros. Estamos evaluando la posibilidad de agregar APIs para precargar y cargar recursos externos sin duplicaciones a través de APIs de React que funcionen en todos los entornos de React.
 
 También estamos considerando que sean compatibles con Suspense, de modo que puedas tener imágenes, CSS y fuentes que bloqueen la visualización hasta que se carguen, pero que no bloqueen la transmisión y el renderizado simultáneo. Esto puede ayudar a evitar [cambios rápidos y caóticos (popcorning)](https://twitter.com/sebmarkbage/status/1516852731251724293) cuando los elementos visuales aparecen y provocan cambios en la presentación.
 
@@ -40,7 +40,7 @@ La Generación de Sitios Estáticos (SSG) y la Regeneración Estática Increment
 
 Presentamos una [early preview](https://www.youtube.com/watch?v=lGEMwh32soc) de React Forget en React Conf 2021. Es un compilador que genera automáticamente llamadas equivalentes a `useMemo` y `useCallback` para minimizar el costo de volver a renderizar, al mismo tiempo que conserva el modelo de programación de React.
 
-Recientemente, terminamos una reescritura del compilador para hacerlo más confiable y eficiente. Esta nueva arquitectura nos permite analizar y memorizar patrones más complejos, como el uso de [mutaciones locales](/learn/keeping-components-pure#local-mutation-your-components-little-secret), y abre muchas nuevas oportunidades de optimización en tiempo de compilación más allá de simplemente igualar los hooks de memoización.
+Recientemente, terminamos una reescritura del compilador para hacerlo más confiable y eficiente. Esta nueva arquitectura nos permite analizar y memorizar patrones más complejos, como el uso de [mutaciones locales](/learn/keeping-components-pure#local-mutation-your-components-little-secret), y abre muchas nuevas oportunidades de optimización en tiempo de compilación más allá de simplemente igualar los Hooks de memoización.
 
 También estamos trabajando en un espacio de experimentación para explorar muchos aspectos del compilador. Si bien el objetivo del espacio de experimentación es facilitar el desarrollo del compilador, creemos que también facilitará probarlo y desarrollar percepción sobre lo que hace el compilador. Revela varias ideas sobre cómo funciona internamente y muestra en tiempo real las salidas del compilador mientras escribes. Esto se incluirá junto con el compilador cuando se lance.
 

src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md

@@ -24,7 +24,7 @@ RSC combines the simple "request/response" mental model of server-centric Multi-
 
 Since our last update, we have merged the [React Server Components RFC](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) to ratify the proposal. We resolved outstanding issues with the [React Server Module Conventions](https://github.com/reactjs/rfcs/blob/main/text/0227-server-module-conventions.md) proposal, and reached consensus with our partners to go with the `"use client"` convention. These documents also act as specification for what an RSC-compatible implementation should support.
 
-The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
+The biggest change is that we introduced [`async` / `await`](https://github.com/reactjs/rfcs/pull/229) as the primary way to do data fetching from Server Components. We also plan to support data loading from the client by introducing a new Hook called `use` that unwraps Promises. Although we can't support `async / await` in arbitrary components in client-only apps, we plan to add support for it when you structure your client-only app similar to how RSC apps are structured.
 
 Now that we have data fetching pretty well sorted, we're exploring the other direction: sending data from the client to the server, so that you can execute database mutations and implement forms. We're doing this by letting you pass Server Action functions across the server/client boundary, which the client can then call, providing seamless RPC. Server Actions also give you progressively enhanced forms before JavaScript loads.