diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index de8b3ef42..f0aef65dc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -79,6 +79,7 @@ Ignora esta regla si estás describiendo específicamente una propuesta experime - Utiliza punto y coma. - No dejes espacio entre los nombres de las funciones y los paréntesis (`method() {}` no `method () {}`). - En caso de duda, utiliza el estilo por defecto preferido por [Prettier](https://prettier.io/playground/). +- Siempre utiliza mayúsculas para conceptos de React como Hooks, Efectos y Transiciones. ### Resaltar diff --git a/package.json b/package.json index 787756833..d75201780 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "webpack-bundle-analyzer": "^4.5.0" }, "engines": { - "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0" + "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0" }, "nextBundleAnalysis": { "budget": null, diff --git a/public/images/team/jack-pope.jpg b/public/images/team/jack-pope.jpg new file mode 100644 index 000000000..601e5840e Binary files /dev/null and b/public/images/team/jack-pope.jpg differ diff --git a/src/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index c9e83ebc6..eaf74187e 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -68,7 +68,7 @@ export function TeamMember({ + className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center"> {twitter} @@ -90,7 +90,7 @@ export function TeamMember({ + className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center"> {github} @@ -99,7 +99,7 @@ export function TeamMember({ + className="hover:text-primary hover:underline dark:text-primary-dark flex flex-row items-center"> {personal} )} diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index 7b3606bae..d06c0e505 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -16,6 +16,7 @@ Nos gustaría reconocer a algunas personas que han hecho contribuciones signific * [Andreas Svensson](https://github.com/syranide) * [Alex Krolick](https://github.com/alexkrolick) * [Alexey Pyltsyn](https://github.com/lex111) +* [Andrey Lunyov](https://github.com/alunyov) * [Brandon Dail](https://github.com/aweary) * [Brian Vaughn](https://github.com/bvaughn) * [Caleb Meredith](https://github.com/calebmer) diff --git a/src/content/community/team.md b/src/content/community/team.md index c19f4e939..a0fa22b72 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -18,10 +18,6 @@ Engineer at Meta Andrew comenzó con el desarrollo web creando sitios con WordPress, y y finalmente se engañó a sí mismo para hacer JavaScript. Su pasatiempo favorito es el karaoke. Andrew es un villano o una princesa de Disney, según el día. - - Andrey comenzó su carrera como diseñador y luego pasó gradualmente al desarrollo web. Después de unirse al equipo de React Data en Meta, trabajó para agregar un compilador de JavaScript incremental a Relay y, más tarde, trabajó para eliminar el mismo compilador de Relay. Fuera del trabajo, a Andrey le gusta tocar música y practicar varios deportes. - - Dan comenzó a programar después de que accidentalmente descubrió Visual Basic dentro de Microsoft PowerPoint. Ha encontrado su verdadera vocación al convertir los tweets de [Sebastian](#sebastian-markbåge) en extensas publicaciones de blog. Dan gana ocasionalmente en Fortnite escondiéndose en un arbusto hasta que termina el juego. @@ -30,6 +26,10 @@ Engineer at Meta Eli se metió en la programación después de que lo suspendieran de la escuela secundaria por piratear. Lleva trabajando en React y React Native desde 2017. Le gusta comer cosas ricas, especialmente helado y tarta de manzana. Puedes encontrar a Eli probando actividades extravagantes como parkour, paracaidismo en interiores y acrobacia en tela. + + Poco después de aprender AutoHotkey, Jack empezó a escribir scripts para automatizar todo lo que se le pasara por la mente. Cuando alcanzó limitaciones allí, se sumergió de lleno en el desarrollo de aplicaciones web y no ha mirado hacia atrás. Más recientemente, Jack trabajó en la plataforma web de Instagram antes de pasar a React. Su lenguaje de programación favorito es JSX. + + A Jason le gusta recibir grandes cantidades de paquetes de Amazon en la oficina para poder construir fuertes. A pesar de que a veces se aísla literalmente de su equipo y no entiende cómo funcionan los bucles de for-of, le apreciamos por las cualidades únicas que aporta a su trabajo. @@ -74,7 +74,7 @@ Engineer at Meta Sebastian se especializó en psicología. Suele ser callado. Incluso, cuando dice algo, a menudo no tiene sentido para el resto de nosotros hasta unos meses después. La forma correcta de pronunciar su apellido es "mark-boa-geh", pero se ha decantado por "mark-beige" por pragmatismo, y así es como se acerca a React. - + Sebastian aprendió a programar para hacer más divertidos los juegos de navegador a los que jugaba en clase. Con el tiempo, esto le llevó a contribuir a la mayor cantidad de código abierto posible. Fuera de la programación, está ocupado asegurándose de que la gente no lo confunda con los otros Sebastian y Zilberman de la comunidad React. diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index a2690b07f..957743cec 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -494,7 +494,7 @@ En general, [no quieres](/learn/referencing-values-with-refs#best-practices-for- React establece `ref.current` durante la confirmación. Antes de actualizar el DOM, React establece los valores afectados de `ref.current` a `null`. Después de actualizar el DOM, React inmediatamente los establece en los nodos DOM correspondientes. -**Generalmente, vas a acceder a las refs desde los controladores de eventos.** Si quieres hacer algo con una ref, pero no hay un evento en particular para hacerlo, es posible que necesites un Efecto. Discutiremos los efectos en las próximas páginas. +**Generalmente, vas a acceder a las refs desde los controladores de eventos.** Si quieres hacer algo con una ref, pero no hay un evento en particular para hacerlo, es posible que necesites un Efecto. Discutiremos los Efectos en las próximas páginas. diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index b2ed3383c..7adf366d9 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -152,7 +152,7 @@ Esto solo funciona a un nivel de profundidad, y pretende ser una escotilla de es ### Manejar contenido diferente entre el cliente y el servidor {/*handling-different-client-and-server-content*/} -Si intencionalmente necesitas renderizar algo distinto en el servidor y el cliente, puedes hacer un renderizado en dos pasos. Los componentes que renderizan algo diferente en el cliente pueden leer una [variable de estado](/reference/react/useState) como `isClient`, que puedes establecer en `true` en un [efecto](/reference/react/useEffect): +Si intencionalmente necesitas renderizar algo distinto en el servidor y el cliente, puedes hacer un renderizado en dos pasos. Los componentes que renderizan algo diferente en el cliente pueden leer una [variable de estado](/reference/react/useState) como `isClient`, que puedes establecer en `true` en un [Efecto](/reference/react/useEffect): diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md index cb14a5e89..9b3100b08 100644 --- a/src/content/reference/react-dom/preconnect.md +++ b/src/content/reference/react-dom/preconnect.md @@ -55,7 +55,7 @@ The `preconnect` function provides the browser with a hint that it should open a #### Caveats {/*caveats*/} * Multiple calls to `preconnect` with the same server have the same effect as a single call. -* In the browser, you can call `preconnect` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `preconnect` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `preconnect` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. * If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away. * There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given. diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md index f9889836e..fc9ffdb16 100644 --- a/src/content/reference/react-dom/prefetchDNS.md +++ b/src/content/reference/react-dom/prefetchDNS.md @@ -54,7 +54,7 @@ The prefetchDNS function provides the browser with a hint that it should look up #### Caveats {/*caveats*/} * Multiple calls to `prefetchDNS` with the same server have the same effect as a single call. -* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `prefetchDNS` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. * If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away. * There is no benefit to prefetching the same server the webpage itself is hosted from because it's already been looked up by the time the hint would be given. diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md index 5a04528bd..3c9a879b4 100644 --- a/src/content/reference/react-dom/preinit.md +++ b/src/content/reference/react-dom/preinit.md @@ -67,7 +67,7 @@ The `preinit` function provides the browser with a hint that it should start dow #### Caveats {/*caveats*/} * Multiple calls to `preinit` with the same `href` have the same effect as a single call. -* In the browser, you can call `preinit` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `preinit` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. --- diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index ba6316a7a..996c5a2ed 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -65,7 +65,7 @@ The `preinitModule` function provides the browser with a hint that it should sta #### Caveats {/*caveats*/} * Multiple calls to `preinitModule` with the same `href` have the same effect as a single call. -* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `preinitModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. --- diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md index 0ad9668d2..1e7fd1959 100644 --- a/src/content/reference/react-dom/preload.md +++ b/src/content/reference/react-dom/preload.md @@ -72,7 +72,7 @@ The `preload` function provides the browser with a hint that it should start dow * Multiple equivalent calls to `preload` have the same effect as a single call. Calls to `preload` are considered equivalent according to the following rules: * Two calls are equivalent if they have the same `href`, except: * If `as` is set to `image`, two calls are equivalent if they have the same `href`, `imageSrcSet`, and `imageSizes`. -* In the browser, you can call `preload` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `preload` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `preload` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. --- diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md index 05333f1cb..99d128c7d 100644 --- a/src/content/reference/react-dom/preloadModule.md +++ b/src/content/reference/react-dom/preloadModule.md @@ -66,7 +66,7 @@ The `preloadModule` function provides the browser with a hint that it should sta #### Caveats {/*caveats*/} * Multiple calls to `preloadModule` with the same `href` have the same effect as a single call. -* In the browser, you can call `preloadModule` in any situation: while rendering a component, in an effect, in an event handler, and so on. +* In the browser, you can call `preloadModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on. * In server-side rendering or when rendering Server Components, `preloadModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored. --- diff --git a/src/content/reference/react/Profiler.md b/src/content/reference/react/Profiler.md index 06ea3284b..f8b72a724 100644 --- a/src/content/reference/react/Profiler.md +++ b/src/content/reference/react/Profiler.md @@ -54,7 +54,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime #### Parámetros {/*onrender-parameters*/} * `id`: La prop `id` del árbol `` que acaba de ser entregado. Esto te permite identificar qué parte del árbol se entregó si estás usando varios perfiles. -* `phase`: `"mount"`, `"update"` o `"nested-update"`. Esto te indica si el árbol acaba de ser montado por primera vez o se ha vuelto a renderizar debido a un cambio en las props, el estado o los hooks. +* `phase`: `"mount"`, `"update"` o `"nested-update"`. Esto te indica si el árbol acaba de ser montado por primera vez o se ha vuelto a renderizar debido a un cambio en las props, el estado o los Hooks. * `actualDuration`: El número de milisegundos que se tardó en renderizar el árbol `` Esto indica qué tan bien el subárbol hace uso de la memoización (por ejemplo, [`memo`](/reference/react/memo) y [`useMemo`](/reference/react/useMemo)). Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizarse si cambian sus propiedades específicas. * `baseDuration`: El número de milisegundos que estima cuánto tiempo tardaría en volver a renderizar todo el subárbol `` sin ninguna optimización. Se calcula sumando las duraciones de renderizado más recientes de cada componente en el árbol. Este valor estima el costo del renderizado para el peor de caso (por ejemplo, el montaje inicial o un árbol sin memoización). Compara `actualDuration` con este valor para ver si la memorización está funcionando. * `startTime`: Una marca de tiempo numérica para cuando React comenzó a renderizar la actualización actual. diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 7120775bb..9d984d457 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -1348,7 +1348,7 @@ input { margin: 10px; } -Tanto los valores aplazados como las [transiciones](#preventing-already-revealed-content-from-hiding) te permiten evitar *fallbacks* de Suspense y en su lugar usar indicadores en línea. Las transiciones marcan todas la actualización como no urgente, por lo que se usan típicamente por frameworks y bibliotecas de enrutamiento para la navegación. Los valores aplazados, en cambio, son útiles sobre todo en código de aplicación en el que quieres marcar una parte de la UI como no urgente, traducido como que está permitido que *se quede por detrás* del resto de la UI. +Tanto los valores aplazados como las [Transiciones](#preventing-already-revealed-content-from-hiding) te permiten evitar *fallbacks* de Suspense y en su lugar usar indicadores en línea. Las Transiciones marcan todas la actualización como no urgente, por lo que se usan típicamente por frameworks y bibliotecas de enrutamiento para la navegación. Los valores aplazados, en cambio, son útiles sobre todo en código de aplicación en el que quieres marcar una parte de la UI como no urgente, traducido como que está permitido que *se quede por detrás* del resto de la UI. @@ -1727,7 +1727,7 @@ main { Cuando presionaste el botón, el componente `Router` renderizó `ArtistPage` en lugar de `IndexPage`. Un componente dentro de `ArtistPage` se suspendió, por lo que la barrera de Suspense más cercana comenzó a mostrar un *fallback* La barrera de Suspense más cercana estaba cerca de la raíz, por lo que todo el sitio quedó reemplazado por `BigSpinner`. -Para prevenir que esto pase, puedes marcar la actualización del estado de navegación como una *transición* con [`startTransition`:](/reference/react/startTransition) +Para prevenir que esto pase, puedes marcar la actualización del estado de navegación como una *Transición* con [`startTransition`:](/reference/react/startTransition) ```js {5,7} function Router() { @@ -1741,7 +1741,7 @@ function Router() { // ... ``` -Esto le dice a React que la transición de estado no es urgente y que es mejor seguir mostrando la página anterior en lugar de esconder contenido ya revelado. Nota como al hacer clic el botón ahora "espera" a que se carga `Biography`: +Esto le dice a React que la Transición de estado no es urgente y que es mejor seguir mostrando la página anterior en lugar de esconder contenido ya revelado. Nota como al hacer clic el botón ahora "espera" a que se carga `Biography`: @@ -2112,19 +2112,19 @@ main { -Una transición no espera por que cargue *todo* el contenido. Espera lo suficiente para evitar esconder contenido ya revelado. Por ejemplo, la maquetación (definida por `Layout`) del sitio ya había sido revelada, por lo que estaría mal esconderla dentro de un indicador de carga. Sin embargo, la barrera de `Suspense` anidada alrededor de `Albums` es nueva, por lo que la transición no espera por ella. +Una Transición no espera por que cargue *todo* el contenido. Espera lo suficiente para evitar esconder contenido ya revelado. Por ejemplo, la maquetación (definida por `Layout`) del sitio ya había sido revelada, por lo que estaría mal esconderla dentro de un indicador de carga. Sin embargo, la barrera de `Suspense` anidada alrededor de `Albums` es nueva, por lo que la Transición no espera por ella. -Los enrutadores preparados para Suspense deberian envolver por defecto las actualizaciones de navegación dentro de transiciones. +Los enrutadores preparados para Suspense deberían envolver por defecto las actualizaciones de navegación dentro de Transiciones. --- -### Indicar que está ocurriendo una transición {/*indicating-that-a-transition-is-happening*/} +### Indicar que está ocurriendo una Transición {/*indicating-that-a-transition-is-happening*/} -En el ejemplo de arriba, una vez que haces clic al botón, no hay un indicador visual de que hay una navegación en proceso. Para añadir un indicador, puedes reemplazar [`startTransition`](/reference/react/startTransition) con [`useTransition`](/reference/react/useTransition) que te da un valor booleano `isPending` (que indica si la transición está pendiente). En el ejemplo de abajo, se usa para cambiar el estilo del encabezado del sitio mientras ocurre la transición: +En el ejemplo de arriba, una vez que haces clic al botón, no hay un indicador visual de que hay una navegación en proceso. Para añadir un indicador, puedes reemplazar [`startTransition`](/reference/react/startTransition) con [`useTransition`](/reference/react/useTransition) que te da un valor booleano `isPending` (que indica si la transición está pendiente). En el ejemplo de abajo, se usa para cambiar el estilo del encabezado del sitio mientras ocurre la Transición: @@ -2502,13 +2502,13 @@ main { ### Reiniciar las barreras de Suspense al navegar {/*resetting-suspense-boundaries-on-navigation*/} -Durante una transición, React evitará esconder el contenido que ya ha sido revelado. Sin embargo, si navegas a una ruta con distintos parámetros, querrías decirle a React que es un contenido *diferente*. Puedes expresar esto con una `key`: +Durante una Transición, React evitará esconder el contenido que ya ha sido revelado. Sin embargo, si navegas a una ruta con distintos parámetros, querrías decirle a React que es un contenido *diferente*. Puedes expresar esto con una `key`: ```js ``` -Imagina que estás navegando dentro de la página del perfil de un usuario, y algo se suspende. Si esa actualización se envuelve en una transición no activará el *fallback* para el contenido ya visible. Ese es el comportamiento esperado. +Imagina que estás navegando dentro de la página del perfil de un usuario, y algo se suspende. Si esa actualización se envuelve en una Transición no activará el *fallback* para el contenido ya visible. Ese es el comportamiento esperado. Sin embargo, imagina ahora que estás navegando entre dos perfiles de usuario distintos. En ese caso, tiene sentido mostrar el *fallback*. Por ejemplo, la línea de tiempo de un usuario es un *contenido diferente* a la línea de tiempo de otro usuario. Al especificar una `key`, te aseguras de que React trate distintos perfiles de usuario como componentes diferente y reinicie las barreras de Suspense durante la navegación. Un framework de enrutamiento integrado con Suspense debería hacerlo automáticamente. @@ -2546,7 +2546,7 @@ El HTML del servidor incluirá el indicador de carga. Este será reemplazado por Reemplazar la interfaz de usuario visible por una de reserva crea una experiencia de usuario discordante. Esto puede ocurrir cuando una actualización hace que un componente se suspenda, y la barrera de Suspense más cercana ya está mostrando contenido al usuario. -Para evitar que esto ocurra, [marca la actualización como no urgente utilizando `startTransition`](#preventing-already-revealed-content-from-hiding). Durante una transición, React esperará hasta que se hayan cargado suficientes datos para evitar que aparezca un *fallback* no deseado: +Para evitar que esto ocurra, [marca la actualización como no urgente utilizando `startTransition`](#preventing-already-revealed-content-from-hiding). Durante una Transición, React esperará hasta que se hayan cargado suficientes datos para evitar que aparezca un *fallback* no deseado: ```js {2-3,5} function handleNextPageClick() { diff --git a/src/content/reference/react/startTransition.md b/src/content/reference/react/startTransition.md index 2943800b2..729863ce2 100644 --- a/src/content/reference/react/startTransition.md +++ b/src/content/reference/react/startTransition.md @@ -20,7 +20,7 @@ startTransition(scope) ### `startTransition(scope)` {/*starttransitionscope*/} -La función `startTransition` te permite marcar una actualización de estado como una transición. +La función `startTransition` te permite marcar una actualización de estado como una Transición. ```js {7,9} import { startTransition } from 'react'; @@ -41,7 +41,7 @@ function TabContainer() { #### Parámetros {/*parameters*/} -* `scope`: Una función que actualiza algún estado llamando a una o más [funciones `set`](/reference/react/useState#setstate). React llama inmediatamente a `scope` sin argumentos y marca todas las actualizaciones de estado programadas de forma síncrona durante la llamada a la función `scope` como transiciones. Estas serán [sin bloqueo](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) y [no mostrarán indicadores de carga no deseados.](/reference/react/useTransition#preventing-unwanted-loading-indicators) +* `scope`: Una función que actualiza algún estado llamando a una o más [funciones `set`](/reference/react/useState#setstate). React llama inmediatamente a `scope` sin argumentos y marca todas las actualizaciones de estado programadas de forma síncrona durante la llamada a la función `scope` como Transiciones. Estas serán [sin bloqueo](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) y [no mostrarán indicadores de carga no deseados.](/reference/react/useTransition#preventing-unwanted-loading-indicators) #### Devuelve {/*returns*/} @@ -49,25 +49,25 @@ function TabContainer() { #### Advertencias {/*caveats*/} -* `startTransition` no proporciona una forma de rastrear si hay una transición pendiente. Para mostrar un indicador pendiente mientras se produce la transición, debes utilizar [`useTransition`](/reference/react/useTransition) en su lugar. +* `startTransition` no proporciona una forma de rastrear si hay una Transición pendiente. Para mostrar un indicador pendiente mientras se produce la Transición, debes utilizar [`useTransition`](/reference/react/useTransition) en su lugar. -* Solo puedes envolver una actualización en una transición si tienes acceso a la función `set` de ese estado. Si deseas iniciar una transición en respuesta a alguna prop o un valor de devolución de un Hook personalizado, intenta usar [`useDeferredValue`](/reference/react/useDeferredValue) en su lugar. +* Solo puedes envolver una actualización en una Transición si tienes acceso a la función `set` de ese estado. Si deseas iniciar una Transición en respuesta a alguna prop o un valor de devolución de un Hook personalizado, intenta usar [`useDeferredValue`](/reference/react/useDeferredValue) en su lugar. -* La función que pasas a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como transiciones. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como transiciones. +* La función que pasas a `startTransition` debe ser sincrónica. React ejecuta inmediatamente esta función, marcando todas las actualizaciones de estado que ocurren mientras se ejecuta como Transiciones. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un timeout), no se marcarán como Transiciones. -* Una actualización de estado marcada como una transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente de gráfico dentro de una transición, pero luego comienzas a escribir en una entrada de texto mientras el gráfico está en medio de una rerenderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de la entrada de texto. +* Una actualización de estado marcada como una Transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente de gráfico dentro de una Transición, pero luego comienzas a escribir en una entrada de texto mientras el gráfico está en medio de una rerenderización, React reiniciará el trabajo de renderizado en el componente de gráfico después de manejar la actualización de estado de la entrada de texto. -* Las actualizaciones de transición no se pueden utilizar para controlar entradas de texto. +* Las actualizaciones de Transición no se pueden utilizar para controlar entradas de texto. -* Si hay varias transiciones en curso, React actualmente las agrupa. Esta es una limitación que probablemente se eliminará en una versión futura. +* Si hay varias Transiciones en curso, React actualmente las agrupa. Esta es una limitación que probablemente se eliminará en una versión futura. --- ## Uso {/*usage*/} -### Marcar una actualización de estado como una transición sin bloqueo {/*marking-a-state-update-as-a-non-blocking-transition*/} +### Marcar una actualización de estado como una Transición sin bloqueo {/*marking-a-state-update-as-a-non-blocking-transition*/} -Puedes marcar una actualización de estado como una transición envolviéndola en una llamada `startTransition`: +Puedes marcar una actualización de estado como una Transición envolviéndola en una llamada `startTransition`: ```js {7,9} import { startTransition } from 'react'; @@ -84,14 +84,14 @@ function TabContainer() { } ``` -Las transiciones te permiten mantener la actualización de la interfaz de usuario receptiva incluso en dispositivos lentos. +Las Transiciones te permiten mantener la actualización de la interfaz de usuario receptiva incluso en dispositivos lentos. -Con una transición, tu interfaz de usuario sigue siendo receptiva en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra pestaña, puede hacerlo sin esperar a que termine la primera renderización. +Con una Transición, tu interfaz de usuario sigue siendo receptiva en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra pestaña, puede hacerlo sin esperar a que termine la primera renderización. -`startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una transición está en curso. Puedes llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. +`startTransition` es muy similar a [`useTransition`](/reference/react/useTransition), excepto que no proporciona la bandera `isPending` para rastrear si una Transición está en curso. Puedes llamar a `startTransition` cuando `useTransition` no esté disponible. Por ejemplo, `startTransition` funciona fuera de los componentes, como desde una biblioteca de datos. -[Aprende sobre las transiciones y ve ejemplos en la página de `useTransition`.](/reference/react/useTransition) +[Aprende sobre las Transiciones y ve ejemplos en la página de `useTransition`.](/reference/react/useTransition) diff --git a/src/content/reference/react/use-server.md b/src/content/reference/react/use-server.md index 818e097d4..ad9724412 100644 --- a/src/content/reference/react/use-server.md +++ b/src/content/reference/react/use-server.md @@ -43,7 +43,7 @@ Instead of individually marking functions with `'use server'`, you can add the d * To import a Server Action from [client code](/reference/react/use-client), the directive must be used on a module level. * Because the underlying network calls are always asynchronous, `'use server'` can only be used on async functions. * Always treat arguments to Server Actions as untrusted input and authorize any mutations. See [security considerations](#security). -* Server Actions should be called in a [transition](/reference/react/useTransition). Server Actions passed to [`
`](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition. +* Server Actions should be called in a [Transition](/reference/react/useTransition). Server Actions passed to [``](/reference/react-dom/components/form#props) or [`formAction`](/reference/react-dom/components/input#props) will automatically be called in a transition. * Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value. ### Security considerations {/*security*/} @@ -176,7 +176,7 @@ Note that like most Hooks, `useFormState` can only be called in -`useInsertionEffect` permite insertar elementos en el DOM antes de que se dispare cualquier efecto de diseño. +`useInsertionEffect` permite insertar elementos en el DOM antes de que se dispare cualquier Efecto de diseño (*layout*). ```js useInsertionEffect(setup, dependencies?) @@ -26,7 +26,7 @@ useInsertionEffect(setup, dependencies?) ### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/} -Llama a `useInsertionEffect` para insertar estilos antes de que se dispare cualquier efecto que pueda necesitar leer el diseño: +Llama a `useInsertionEffect` para insertar estilos antes de que se dispare cualquier Efecto que pueda necesitar leer el diseño: ```js import { useInsertionEffect } from 'react'; @@ -44,7 +44,7 @@ function useCSS(rule) { #### Parámetros {/*parameters*/} -* `setup`: La función con la lógica de tus Efectos. Tu función _setup_ también puede devolver opcionalmente una función de *limpieza*. Cuando tu componente es añadido al DOM, pero antes de que se dispare cualquier efecto de diseño, React ejecutará tu función _setup_. Después de cada re-renderizado con dependencias modificadas, React ejecutará primero la función de limpieza (si la has proporcionado) con los valores antiguos, y luego ejecutará tu función _setup_ con los nuevos valores. Cuando tu componente es removido del DOM, React ejecutará tu función de limpieza. +* `setup`: La función con la lógica de tus Efectos. Tu función _setup_ también puede devolver opcionalmente una función de *limpieza*. Cuando tu componente es añadido al DOM, pero antes de que se dispare cualquier Efecto de diseño, React ejecutará tu función _setup_. Después de cada re-renderizado con dependencias modificadas, React ejecutará primero la función de limpieza (si la has proporcionado) con los valores antiguos, y luego ejecutará tu función _setup_ con los nuevos valores. Cuando tu componente es removido del DOM, React ejecutará tu función de limpieza. * ***opcional** `dependencias`: La lista de todos los valores reactivos referenciados dentro del el código de `setup`. Los valores reactivos incluyen props, estado y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter está [configurado para React](/learn/editor-setup#linting), verificará que cada valor reactivo esté correctamente especificado como dependencia. La lista de dependencias tienen que tener un número constante de elementos y que sean escritos en línea como `[dep1, dep2, dep3]`. React comparará cada dependencia con su valor previo usando el algoritmo de comparación [`Object.is`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/is). Si no especificas ninguna dependencia, tu Efecto se volverá a ejecutar después de cada renderizado del componente. @@ -88,7 +88,7 @@ Si usas CSS-en-JS, recomendamos la combinación de los dos primeros enfoques (ar El primer problema no se puede resolver, pero `useInsertionEffect` te ayuda a solucionar el segundo problema. -Llama a `useInsertionEffect` para insertar los estilos antes de que se disparen los efectos de diseño: +Llama a `useInsertionEffect` para insertar los estilos antes de que se disparen los Efectos de diseño: ```js {4-11} // En tu biblioteca CSS-en-JS diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md index bee272b41..ffcea7931 100644 --- a/src/content/reference/react/useSyncExternalStore.md +++ b/src/content/reference/react/useSyncExternalStore.md @@ -57,9 +57,9 @@ La instantánea actual de la fuente de almacenamiento que puedes usar en tu lóg * Si se pasa una función `subscribe` diferente durante un rerenderizado, React se volverá a suscribir a la fuente de almacenamiento de datos usando la función `subscribe` recién pasada. Puedes evitarlo declarando `subscribe` fuera del componente. -* If the store is mutated during a [non-blocking transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, for every transition update, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. +* If the store is mutated during a [non-blocking Transition update](/reference/react/useTransition), React will fall back to performing that update as blocking. Specifically, for every Transition update, React will call `getSnapshot` a second time just before applying changes to the DOM. If it returns a different value than when it was called originally, React will restart the update from scratch, this time applying it as a blocking update, to ensure that every component on screen is reflecting the same version of the store. -* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be marked as [non-blocking transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX. +* It's not recommended to _suspend_ a render based on a store value returned by `useSyncExternalStore`. The reason is that mutations to the external store cannot be marked as [non-blocking Transition updates](/reference/react/useTransition), so they will trigger the nearest [`Suspense` fallback](/reference/react/Suspense), replacing already-rendered content on screen with a loading spinner, which typically makes a poor UX. For example, the following are discouraged: diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md index a75e76606..28f88f3f4 100644 --- a/src/content/reference/react/useTransition.md +++ b/src/content/reference/react/useTransition.md @@ -20,7 +20,7 @@ const [isPending, startTransition] = useTransition() ### `useTransition()` {/*usetransition*/} -Llama a `useTransition` en el nivel superior de tu componente para marcar algunas actualizaciones de estado como transiciones. +Llama a `useTransition` en el nivel superior de tu componente para marcar algunas actualizaciones de estado como Transiciones. ```js import { useTransition } from 'react'; @@ -41,14 +41,14 @@ function TabContainer() { `useTransition` devuelve un _array_ con exactamente dos elementos: -1. `isPending` que indica si hay una transición pendiente. -2. [`startTransition` function](#starttransition) que permite marcar una actualización de estado como una transición. +1. `isPending` que indica si hay una Transición pendiente. +2. [`startTransition` function](#starttransition) que permite marcar una actualización de estado como una Transición. --- ### Función `startTransition` {/*starttransition*/} -La función `startTransition` devuelta por `useTransition` permite marcar una actualización de estado como una transición. +La función `startTransition` devuelta por `useTransition` permite marcar una actualización de estado como una Transición. ```js {6,8} function TabContainer() { @@ -66,7 +66,7 @@ function TabContainer() { #### Parámetros {/*starttransition-parameters*/} -* `scope`: Una función que actualiza algún estado llamando a una o varias [funciones `set`.](/reference/react/useState#setstate) React inmediatamente llama a `scope` sin parámetros y marca todas las actualizaciones de estado programadas sincrónicamente durante la llamada a la función `scope` como transiciones. Serán [sin bloqueo](#marking-a-state-update-as-a-non-blocking-transition) y [no mostrarán indicadores de carga no deseados.](#preventing-unwanted-loading-indicators) +* `scope`: Una función que actualiza algún estado llamando a una o varias [funciones `set`.](/reference/react/useState#setstate) React inmediatamente llama a `scope` sin parámetros y marca todas las actualizaciones de estado programadas sincrónicamente durante la llamada a la función `scope` como Transiciones. Serán [sin bloqueo](#marking-a-state-update-as-a-non-blocking-transition) y [no mostrarán indicadores de carga no deseados.](#preventing-unwanted-loading-indicators) #### Devuelve {/*starttransition-returns*/} @@ -74,25 +74,25 @@ function TabContainer() { #### Advertencias {/*starttransition-caveats*/} -* `useTransition` es un Hook, por lo que sólo puede ser llamado dentro de componentes o Hooks personalizados. Si necesitas iniciar una transición en otro lugar (por ejemplo, desde una biblioteca de datos), llama a la función independiente [`startTransition`](/reference/react/startTransition) en su lugar. +* `useTransition` es un Hook, por lo que sólo puede ser llamado dentro de componentes o Hooks personalizados. Si necesitas iniciar una Transición en otro lugar (por ejemplo, desde una biblioteca de datos), llama a la función independiente [`startTransition`](/reference/react/startTransition) en su lugar. -* Puedes envolver una actualización en una transición sólo si tienes acceso a la función `set` de ese estado. Si deseas iniciar una transición en respuesta a alguna prop o algún valor de un Hook personalizado, prueba [`useDeferredValue`](/reference/react/useDeferredValue) en su lugar. +* Puedes envolver una actualización en una Transición sólo si tienes acceso a la función `set` de ese estado. Si deseas iniciar una Transición en respuesta a alguna prop o algún valor de un Hook personalizado, prueba [`useDeferredValue`](/reference/react/useDeferredValue) en su lugar. -* La función que pases a `startTransition` debe ser síncrona. React ejecuta inmediatamente esta función, marcando como transiciones todas las actualizaciones de estado que se produzcan mientras se ejecuta. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un tiempo de espera), no se marcarán como transiciones. +* La función que pases a `startTransition` debe ser síncrona. React ejecuta inmediatamente esta función, marcando como Transiciones todas las actualizaciones de estado que se produzcan mientras se ejecuta. Si intentas realizar más actualizaciones de estado más tarde (por ejemplo, en un tiempo de espera), no se marcarán como Transiciones. -* Una actualización de estado marcada como transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente gráfico dentro de una transición, pero luego empiezas a escribir en un input mientras el gráfico está en medio de un rerenderizado, React reiniciará el trabajo de renderizado en el componente gráfico después de gestionar la actualización del input. +* Una actualización de estado marcada como Transición será interrumpida por otras actualizaciones de estado. Por ejemplo, si actualizas un componente gráfico dentro de una Transición, pero luego empiezas a escribir en un input mientras el gráfico está en medio de un rerenderizado, React reiniciará el trabajo de renderizado en el componente gráfico después de gestionar la actualización del input. -* Las actualizaciones de transición no pueden utilizarse para controlar las entradas de texto. +* Las actualizaciones de Transición no pueden utilizarse para controlar las entradas de texto. -* Si hay varias transiciones en curso, React las agrupa. Se trata de una limitación que probablemente se eliminará en una versión futura. +* Si hay varias Transiciones en curso, React las agrupa. Se trata de una limitación que probablemente se eliminará en una versión futura. --- ## Uso {/*usage*/} -### Marcar una actualización de estado como transición no bloqueante {/*marking-a-state-update-as-a-non-blocking-transition*/} +### Marcar una actualización de estado como Transición no bloqueante {/*marking-a-state-update-as-a-non-blocking-transition*/} -Llama a `useTransition` en el nivel superior de tu componente para marcar las actualizaciones de estado como *transiciones* no bloqueantes. +Llama a `useTransition` en el nivel superior de tu componente para marcar las actualizaciones de estado como *Transiciones* no bloqueantes. ```js [[1, 4, "isPending"], [2, 4, "startTransition"]] import { useState, useTransition } from 'react'; @@ -105,10 +105,10 @@ function TabContainer() { `useTransition` devuelve un array con exactamente dos elementos: -1. `isPending` flag que te indica si hay una transición pendiente. -2. `startTransition` function que permite marcar una actualización de estado como una transición. +1. `isPending` flag que te indica si hay una Transición pendiente. +2. `startTransition` function que permite marcar una actualización de estado como una Transición. -A continuación, puedes marcar una actualización de estado como una transición de esta manera: +A continuación, puedes marcar una actualización de estado como una Transición de esta manera: ```js {6,8} function TabContainer() { @@ -124,17 +124,17 @@ function TabContainer() { } ``` -Las transiciones permiten mantener la capacidad de respuesta de las actualizaciones de la interfaz de usuario incluso en dispositivos lentos. +Las Transiciones permiten mantener la capacidad de respuesta de las actualizaciones de la interfaz de usuario incluso en dispositivos lentos. -Con una transición, la interfaz de usuario mantiene su capacidad de respuesta en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra, puede hacerlo sin esperar a que termine la primera renderización. +Con una Transición, la interfaz de usuario mantiene su capacidad de respuesta en medio de una nueva renderización. Por ejemplo, si el usuario hace clic en una pestaña pero luego cambia de opinión y hace clic en otra, puede hacerlo sin esperar a que termine la primera renderización. -#### Actualizar la pestaña actual en una transición {/*updating-the-current-tab-in-a-transition*/} +#### Actualizar la pestaña actual en una Transición {/*updating-the-current-tab-in-a-transition*/} En este ejemplo, la pestaña "Posts" está **artificialmente ralentizada** para que tarde al menos un segundo en renderizarse. -Haz clic en "Mensajes" y luego inmediatamente en "Contacto". Observa que esto interrumpe la renderización lenta de "Posts". La pestaña _"Contact"_ se muestra inmediatamente. Debido a que esta actualización de estado está marcada como una transición, una renderización lenta no congela la interfaz de usuario. +Haz clic en "Mensajes" y luego inmediatamente en "Contacto". Observa que esto interrumpe la renderización lenta de "Posts". La pestaña _"Contact"_ se muestra inmediatamente. Debido a que esta actualización de estado está marcada como una Transición, una renderización lenta no congela la interfaz de usuario. @@ -269,11 +269,11 @@ b { display: inline-block; margin-right: 10px; } -#### Actualizar la pestaña actual sin transición {/*updating-the-current-tab-without-a-transition*/} +#### Actualizar la pestaña actual sin Transición {/*updating-the-current-tab-without-a-transition*/} -En este ejemplo, la pestaña "Posts" también es **artificialmente ralentizada** para que tarde al menos un segundo en renderizarse. A diferencia del ejemplo anterior, esta actualización de estado **no es una transición.** +En este ejemplo, la pestaña "Posts" también es **artificialmente ralentizada** para que tarde al menos un segundo en renderizarse. A diferencia del ejemplo anterior, esta actualización de estado **no es una Transición.** -Haz clic en "Mensajes" e inmediatamente después en "Contacto". Observa que la aplicación se congela mientras se renderiza la pestaña ralentizada, y la interfaz de usuario deja de responder. Esta actualización de estado no es una transición, por lo que una renderización lenta congela la interfaz de usuario. +Haz clic en "Mensajes" e inmediatamente después en "Contacto". Observa que la aplicación se congela mientras se renderiza la pestaña ralentizada, y la interfaz de usuario deja de responder. Esta actualización de estado no es una Transición, por lo que una renderización lenta congela la interfaz de usuario. @@ -409,9 +409,9 @@ b { display: inline-block; margin-right: 10px; } --- -### Actualización del componente principal en una transición {/*updating-the-parent-component-in-a-transition*/} +### Actualización del componente principal en una Transición {/*updating-the-parent-component-in-a-transition*/} -También puedes actualizar el estado de un componente padre desde la llamada "useTransition". Por ejemplo, este componente `TabButton` envuelve su lógica `onClick` en una transición: +También puedes actualizar el estado de un componente padre desde la llamada "useTransition". Por ejemplo, este componente `TabButton` envuelve su lógica `onClick` en una Transición: ```js {8-10} export default function TabButton({ children, isActive, onClick }) { @@ -431,7 +431,7 @@ export default function TabButton({ children, isActive, onClick }) { } ``` -Debido a que el componente padre actualiza su estado dentro del controlador de evento `onClick`, esa actualización de estado se marca como una transición. Esta es la razón por la que, como en el ejemplo anterior, puedes hacer clic en "Posts" y luego inmediatamente hacer clic en "Contacto". La actualización de la pestaña seleccionada se marca como una transición, por lo que no bloquea las interacciones del usuario. +Debido a que el componente padre actualiza su estado dentro del controlador de evento `onClick`, esa actualización de estado se marca como una Transición. Esta es la razón por la que, como en el ejemplo anterior, puedes hacer clic en "Posts" y luego inmediatamente hacer clic en "Contacto". La actualización de la pestaña seleccionada se marca como una Transición, por lo que no bloquea las interacciones del usuario. @@ -560,9 +560,9 @@ b { display: inline-block; margin-right: 10px; } --- -### Visualización de un estado visual pendiente durante la transición {/*displaying-a-pending-visual-state-during-the-transition*/} +### Visualización de un estado visual pendiente durante la Transición {/*displaying-a-pending-visual-state-during-the-transition*/} -Puedes utilizar el valor booleano `isPending` devuelto por `useTransition` para indicar al usuario que una transición está en curso. Por ejemplo, el botón de la pestaña puede tener un estado visual especial "pendiente": +Puedes utilizar el valor booleano `isPending` devuelto por `useTransition` para indicar al usuario que una Transición está en curso. Por ejemplo, el botón de la pestaña puede tener un estado visual especial "pendiente": ```js {4-6} function TabButton({ children, isActive, onClick }) { @@ -1087,11 +1087,11 @@ b { display: inline-block; margin-right: 10px; } -[Más información sobre el uso de transiciones con Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding) +[Más información sobre el uso de Transiciones con Suspense.](/reference/react/Suspense#preventing-already-revealed-content-from-hiding) -Las transiciones sólo "esperarán" el tiempo suficiente para evitar ocultar el contenido *ya revelado* (como el contenedor de la pestaña). Si la pestaña Entradas tuviera una [barrera de `` anidada,](/reference/react/Suspense#revealing-nested-content-as-it-loads) la transición no la "esperaría". +Las Transiciones sólo "esperarán" el tiempo suficiente para evitar ocultar el contenido *ya revelado* (como el contenedor de la pestaña). Si la pestaña Entradas tuviera una [barrera de `` anidada,](/reference/react/Suspense#revealing-nested-content-as-it-loads) la Transición no la "esperaría". @@ -1099,7 +1099,7 @@ Las transiciones sólo "esperarán" el tiempo suficiente para evitar ocultar el ### Construir un enrutador preparado para Suspense {/*building-a-suspense-enabled-router*/} -Si estás construyendo un framework de React o un enrutador, te recomendamos marcar las navegaciones de página como transiciones. +Si estás construyendo un framework de React o un enrutador, te recomendamos marcar las navegaciones de página como Transiciones. ```js {3,6,8} function Router() { @@ -1116,10 +1116,10 @@ function Router() { Esto se recomienda por dos razones: -- [Las transiciones son interrumpibles,](#marking-a-state-update-as-a-non-blocking-transition) que permite al usuario hacer clic sin esperar a que se complete la nueva renderización. -- [Las transiciones evitan indicadores de carga no deseados,](#preventing-unwanted-loading-indicators) que permite al usuario evitar saltos bruscos en la navegación. +- [Las Transiciones son interrumpibles,](#marking-a-state-update-as-a-non-blocking-transition) que permite al usuario hacer clic sin esperar a que se complete la nueva renderización. +- [Las Transiciones evitan indicadores de carga no deseados,](#preventing-unwanted-loading-indicators) que permite al usuario evitar saltos bruscos en la navegación. -He aquí un pequeño ejemplo de enrutador simplificado que utiliza transiciones para las navegaciones. +He aquí un pequeño ejemplo de enrutador simplificado que utiliza Transiciones para las navegaciones. @@ -1495,7 +1495,7 @@ main { -Se espera que los enredadores [preparados para Suspense](/reference/react/Suspense) envuelvan las actualizaciones de navegación en transiciones por defecto. +Se espera que los enredadores [preparados para Suspense](/reference/react/Suspense) envuelvan las actualizaciones de navegación en Transiciones por defecto. @@ -1598,15 +1598,15 @@ root.render( ## Solución de problemas {/*troubleshooting*/} -### No funciona la actualización de una entrada en una transición {/*updating-an-input-in-a-transition-doesnt-work*/} +### No funciona la actualización de una entrada en una Transición {/*updating-an-input-in-a-transition-doesnt-work*/} -No se puede utilizar una transición para una variable de estado que controla una entrada: +No se puede utilizar una Transición para una variable de estado que controla una entrada: ```js {4,10} const [text, setText] = useState(''); // ... function handleChange(e) { - // ❌ Can't use transitions for controlled input state + // ❌ Can't use Transitions for controlled input state startTransition(() => { setText(e.target.value); }); @@ -1615,16 +1615,16 @@ function handleChange(e) { return ; ``` -Esto se debe a que las transiciones son no bloqueantes, pero la actualización de una entrada en respuesta al evento de cambio debe producirse de forma sincrónica. Si deseas ejecutar una transición en respuesta a la escritura, tiene dos opciones: +Esto se debe a que las Transiciones son no bloqueantes, pero la actualización de una entrada en respuesta al evento de cambio debe producirse de forma sincrónica. Si deseas ejecutar una Transición en respuesta a la escritura, tiene dos opciones: -1. Puedes declarar dos variables de estado separadas: una para el estado de la entrada (que siempre se actualiza de forma sincrónica), y otra que actualizarás en una transición. Esto te permite controlar la entrada utilizando el estado síncrono, y pasar la variable de estado de transición (que "irá por detrás" de la entrada) al resto de tu lógica de renderizado. +1. Puedes declarar dos variables de estado separadas: una para el estado de la entrada (que siempre se actualiza de forma sincrónica), y otra que actualizarás en una Transición. Esto te permite controlar la entrada utilizando el estado síncrono, y pasar la variable de estado de Transición (que "irá por detrás" de la entrada) al resto de tu lógica de renderizado. 2. Alternativamente, puedes tener una variable de estado, y añadir [`useDeferredValue`](/reference/react/useDeferredValue) que "irá por detrás" del valor real. Se activarán rerenderizados no bloqueantes para "ponerse al día" con el nuevo valor de forma automática. --- -### React no trata mi actualización de estado como una transición {/*react-doesnt-treat-my-state-update-as-a-transition*/} +### React no trata mi actualización de estado como una Transición {/*react-doesnt-treat-my-state-update-as-a-transition*/} -Cuando envuelvas una actualización de estado en una transición, asegúrate de que ocurre *durante* la llamada `startTransition`: +Cuando envuelvas una actualización de estado en una Transición, asegúrate de que ocurre *durante* la llamada `startTransition`: ```js startTransition(() => { @@ -1635,7 +1635,7 @@ startTransition(() => { La función que pases a `startTransition` debe ser síncrona. -No puedes marcar una actualización como una transición así: +No puedes marcar una actualización como una Transición así: ```js startTransition(() => { @@ -1657,7 +1657,7 @@ setTimeout(() => { }, 1000); ``` -Del mismo modo, no se puede marcar una actualización como una transición como esta: +Del mismo modo, no se puede marcar una actualización como una Transición como esta: ```js startTransition(async () => { @@ -1698,7 +1698,7 @@ startTransition(() => { console.log(3); ``` -**Se espera que imprima 1, 2, 3.** La función que pasas a `startTransition` no se retrasa. Al contrario que con el `setTimeout` del navegador, no ejecuta el callback más tarde. React ejecuta tu función inmediatamente, pero cualquier actualización de estado programada *mientras se está ejecutando* se marca como transición. Puedes imaginar que funciona así: +**Se espera que imprima 1, 2, 3.** La función que pasas a `startTransition` no se retrasa. Al contrario que con el `setTimeout` del navegador, no ejecuta el callback más tarde. React ejecuta tu función inmediatamente, pero cualquier actualización de estado programada *mientras se está ejecutando* se marca como Transición. Puedes imaginar que funciona así: ```js // A simplified version of how React works @@ -1713,7 +1713,7 @@ function startTransition(scope) { function setState() { if (isInsideTransition) { - // ... schedule a transition state update ... + // ... schedule a Transition state update ... } else { // ... schedule an urgent state update ... } diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index d80207c7d..733597c63 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -3,7 +3,7 @@ title: Components and Hooks must be pure --- -Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allows React to automatically optimize your components and hooks correctly. +Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allows React to automatically optimize your components and Hooks correctly. @@ -16,9 +16,9 @@ This reference page covers advanced topics and requires familiarity with the con One of the key concepts that makes React, _React_ is _purity_. A pure component or hook is one that is: -* **Idempotent** – You [always get the same result everytime](/learn/keeping-components-pure#purity-components-as-formulas) you run it with the same inputs – props, state, context for component inputs; and arguments for hook inputs. +* **Idempotent** – You [always get the same result every time](/learn/keeping-components-pure#purity-components-as-formulas) you run it with the same inputs – props, state, context for component inputs; and arguments for hook inputs. * **Has no side effects in render** – Code with side effects should run [**separately from rendering**](#how-does-react-run-your-code). For example as an [event handler](/learn/responding-to-events) – where the user interacts with the UI and causes it to update; or as an [Effect](/reference/react/useEffect) – which runs after render. -* **Does not mutate non-local values**: Components and hooks should [never modify values that aren't created locally](#mutation) in render. +* **Does not mutate non-local values**: Components and Hooks should [never modify values that aren't created locally](#mutation) in render. When render is kept pure, React can understand how to prioritize which updates are most important for the user to see first. This is made possible because of render purity: since components don't have side effects [in render](#how-does-react-run-your-code), React can pause rendering components that aren't as important to update, and only come back to them later when it's needed. @@ -28,7 +28,7 @@ Concretely, this means that rendering logic can be run multiple times in a way t React is declarative: you tell React _what_ to render, and React will figure out _how_ best to display it to your user. To do this, React has a few phases where it runs your code. You don't need to know about all of these phases to use React well. But at a high level, you should know about what code runs in _render_, and what runs outside of it. -_Rendering_ refers to calculating what the next version of your UI should look like. After rendering, [Effects](/reference/react/useEffect) are _flushed_ (meaning they are run until there are no more left) and may update the calculation if the Effects have impacts on layout. React takes this new calculation and compares it to the calulation used to create the previous version of your UI, then _commits_ just the minimum changes needed to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) (what your user actually sees) to catch it up to the latest version. +_Rendering_ refers to calculating what the next version of your UI should look like. After rendering, [Effects](/reference/react/useEffect) are _flushed_ (meaning they are run until there are no more left) and may update the calculation if the Effects have impacts on layout. React takes this new calculation and compares it to the calculation used to create the previous version of your UI, then _commits_ just the minimum changes needed to the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) (what your user actually sees) to catch it up to the latest version. @@ -68,9 +68,9 @@ function Dropdown() { --- -## Components and hooks must be idempotent {/*components-and-hooks-must-be-idempotent*/} +## Components and Hooks must be idempotent {/*components-and-hooks-must-be-idempotent*/} -Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result everytime](learn/keeping-components-pure) you run that piece of code with the same inputs. +Components must always return the same output with respect to their inputs – props, state, and context. This is known as _idempotency_. [Idempotency](https://en.wikipedia.org/wiki/Idempotence) is a term popularized in functional programming. It refers to the idea that you [always get the same result every time](learn/keeping-components-pure) you run that piece of code with the same inputs. This means that _all_ code that runs [during render](#how-does-react-run-your-code) must also be idempotent in order for this rule to hold. For example, this line of code is not idempotent (and therefore, neither is the component): @@ -307,7 +307,7 @@ function useIconStyle(icon) { } ``` -If you were to mutate the hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. +If you were to mutate the Hooks arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that. ```js {4} style = useIconStyle(icon); // `style` is memoized based on `icon` @@ -321,7 +321,7 @@ icon = { ...icon, enabled: false }; // Good: ✅ make a copy instead style = useIconStyle(icon); // new value of `style` is calculated ``` -Similarly, it's important to not modify the return values of hooks, as they may have been memoized. +Similarly, it's important to not modify the return values of Hooks, as they may have been memoized. --- @@ -361,4 +361,4 @@ function Page({ colour }) { ); } -``` \ No newline at end of file +``` diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md index f82b38156..3d865b4f2 100644 --- a/src/content/reference/rules/react-calls-components-and-hooks.md +++ b/src/content/reference/rules/react-calls-components-and-hooks.md @@ -3,7 +3,7 @@ title: React calls Components and Hooks --- -React is responsible for rendering components and hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. +React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. @@ -27,7 +27,7 @@ function BlogPost() { } ``` -If a component contains hooks, it's easy to violate the [Rules of Hooks](/reference/rules/rules-of-hooks) when components are called directly in a loop or conditionally. +If a component contains Hooks, it's easy to violate the [Rules of Hooks](/reference/rules/rules-of-hooks) when components are called directly in a loop or conditionally. Letting React orchestrate rendering also allows a number of benefits: @@ -39,30 +39,30 @@ Letting React orchestrate rendering also allows a number of benefits: --- -## Never pass around hooks as regular values {/*never-pass-around-hooks-as-regular-values*/} +## Never pass around Hooks as regular values {/*never-pass-around-hooks-as-regular-values*/} -Hooks should only be called inside of components or hooks. Never pass it around as a regular value. +Hooks should only be called inside of components or Hooks. Never pass it around as a regular value. Hooks allow you to augment a component with React features. They should always be called as a function, and never passed around as a regular value. This enables _local reasoning_, or the ability for developers to understand everything a component can do by looking at that component in isolation. Breaking this rule will cause React to not automatically optimize your component. -### Don't dynamically mutate a hook {/*dont-dynamically-mutate-a-hook*/} +### Don't dynamically mutate a Hook {/*dont-dynamically-mutate-a-hook*/} -Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order hooks: +Hooks should be as "static" as possible. This means you shouldn't dynamically mutate them. For example, this means you shouldn't write higher order Hooks: ```js {2} function ChatInput() { - const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order hooks + const useDataWithLogging = withLogging(useData); // 🔴 Bad: don't write higher order Hooks const data = useDataWithLogging(); } ``` -Hooks should be immutable and not be mutated. Instead of mutating a hook dynamically, create a static version of the hook with the desired functionality. +Hooks should be immutable and not be mutated. Instead of mutating a Hook dynamically, create a static version of the Hook with the desired functionality. ```js {2,6} function ChatInput() { - const data = useDataWithLogging(); // ✅ Good: Create a new version of the hook + const data = useDataWithLogging(); // ✅ Good: Create a new version of the Hook } function useDataWithLogging() { @@ -70,17 +70,17 @@ function useDataWithLogging() { } ``` -### Don't dynamically use hooks {/*dont-dynamically-use-hooks*/} +### Don't dynamically use Hooks {/*dont-dynamically-use-hooks*/} -Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a hook as a value: +Hooks should also not be dynamically used: for example, instead of doing dependency injection in a component by passing a Hook as a value: ```js {2} function ChatInput() { - return