Sync with react.dev @ a0cacd7d

package.json

@@ -36,7 +36,7 @@
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "react": "^0.0.0-experimental-16d053d59-20230506",
-    "react-collapsed": "npm:@gaearon/[email protected]",
+    "react-collapsed": "4.0.4",
     "react-dom": "^0.0.0-experimental-16d053d59-20230506",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1"

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -7,7 +7,7 @@ import {useRef, useLayoutEffect, Fragment} from 'react';
 import cn from 'classnames';
 import {useRouter} from 'next/router';
 import {SidebarLink} from './SidebarLink';
-import useCollapse from 'react-collapsed';
+import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
 

src/components/Seo.tsx

@@ -22,6 +22,7 @@ const deployedTranslations = [
   'zh-hans',
   'es',
   'fr',
+  'ja',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.

src/content/community/meetups.md

@@ -48,6 +48,7 @@ title: Reuniones de React
 * [Montreal, QC - React Native](https://www.meetup.com/fr-FR/React-Native-MTL/)
 * [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/)
 * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/)
 
 ## Chile {/*chile*/}

src/content/learn/describing-the-ui.md

@@ -18,6 +18,7 @@ React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI
 * [Cómo renderizar componentes condicionalmente](/learn/conditional-rendering)
 * [Cómo renderizar múltiples componentes a la vez](/learn/rendering-lists)
 * [Cómo evitar errores confusos manteniendo los componentes puros](/learn/keeping-components-pure)
+* [Por qué es útil entender la UI como árboles](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -523,6 +524,29 @@ Lee **[Mantener los componentes puros](/learn/keeping-components-pure)** para ap
 
 </LearnMore>
 
+## Tu UI como un árbol {/*your-ui-as-a-tree*/}
+
+React utiliza árboles para modelar las relaciones entre componentes y módulos.
+
+Un árbol de renderizado de React es una representación de la relación padre-hijo entre componentes.
+
+<Diagram name="generic_render_tree" height={250} width={500} alt="Un gráfo de árbol con cinco nodos, con cada nodo que representa un componente. El nodo raíz se localiza en la cima del grafo de árbol y está etiquetado como 'Root Component'. Tiene dos flechas que se extienden hacia abajo a dos nodos etiquetados como 'Component A' y 'Component C'. Cada una de las flechas está etiquetada con 'renders'. El 'Component A' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component B'. 'Component C' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component D'.">Un ejemplo de un árbol de renderizado de React.</Diagram>
+
+Los componentes cercanos a la cima del árbol, cerca del componente raíz, se consideran componentes de nivel superior. Los componentes sin componentes hijos son componentes hoja. Esta categorización de los componentes es útil para entender el flujo de datos y el rendimiento del renderizado.
+
+Modelar la relación entre los módulos de JavaScript es otra forma útil de entender tu apliación. Nos referimos a esto como un árbol de dependencia de módulos.
+
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un grafo de árbol con cinco nodos. Cada nodo representa un módulo de JavaScript. El nodo superior está etiquetado como 'RootModule.js'. Tiene tres flechas que se extienden hacia los nodos: 'ModuleA.js', 'ModuleB.js' y 'ModuleC.js'. Cada flecha se etiqueta como 'imports'. El nodo 'ModuleC.js' tiene una sola flecha 'imports' que apunta al nodo etiquetado como 'ModuleD.js'.">Un ejemplo de un árbol de dependecias de módulos.</Diagram>
+
+Un árbol de dependencias se usa a menudo para construir herramientas que empaquetan todo el código relevante de JavaScript para que el cliente descargue y renderice. Un tamaño grande del paquete significa una regresión en la experiencia de usuario para las aplicaciones de React. Entender el árbol de dependencias de los móduls ayuda a depurar tales problemas.
+
+<LearnMore path="/learn/understanding-your-ui-as-a-tree">
+
+Lee **[Tu UI como un árbol](/learn/understanding-your-ui-as-a-tree)** para aprender como crear árboles de renderizado y dependencias para una aplicación de React y cómo son modelos mentales útiles para mejorar la experiencia de usuario y el rendimiento.
+
+</LearnMore>
+
+
 ## ¿Qué sigue? {/*whats-next*/}
 
 ¡Dirígete a [Tu primer componente](/learn/your-first-component) para que comiences a leer este capítulo página por página!

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

@@ -10,33 +10,17 @@ El estado está aislado entre los componentes. React mantiene un registro de qu
 
 <YouWillLearn>
 
-* Cómo React "ve" las estructuras de los componentes
-* Cuándo React elige preservar o reiniciar el estado
-* Cómo forzar a React a reiniciar el estado del componente
-* Cómo las claves y los tipos afectan a la preservación del estado
+* When React chooses to preserve or reset the state
+* How to force React to reset component's state
+* How keys and types affect whether the state is preserved
 
 </YouWillLearn>
 
-## El árbol de la UI {/*the-ui-tree*/}
+## El estado está atado a la posición en el árbol de renderizado {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Los navegadores utilizan muchas estructuras de árbol para modelar la interfaz de usuario. El [DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) representa los elementos HTML, el [CSSOM](https://developer.mozilla.org/es/docs/Web/API/CSS_Object_Model) hace lo mismo con el CSS. ¡Hay incluso un  [árbol de accesibilidad](https://developer.mozilla.org/es/docs/Glossary/Accessibility_tree)!
-
-React también utiliza estructuras de árbol para gestionar y modelar la UI que estás generando. React crea **árboles de UI** a partir de su JSX. Posteriormente, React DOM actualiza los elementos del DOM del navegador para que coincidan con ese árbol UI. (React Native traduce estos árboles en elementos específicos para plataformas móviles).
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagrama con tres secciones dispuestas horizontalmente. En la primera sección, hay tres rectángulos apilados verticalmente, con las etiquetas 'Componente A', 'Componente B', y 'Componente C'. La transición al siguiente panel es una flecha con el logo de React en la parte superior etiquetada como 'React'. La sección central contiene un árbol de componentes, con la raíz etiquetada 'A' y dos hijos etiquetados 'B' y 'C'. La siguiente sección vuelve a ser una transición con una flecha con el logo de React en la parte superior, etiquetada como 'React'. La tercera y última sección es un wireframe de un navegador, que contiene un árbol de 8 nodos, que sólo tiene un subconjunto resaltado (indicando el subárbol de la sección central).">
-
-A partir de los componentes, React crea un árbol de interfaz de usuario que React DOM utiliza para representar el DOM.
-
-</Diagram>
-
-</DiagramGroup>
-
-## El estado está atado a una posición en el árbol {/*state-is-tied-to-a-position-in-the-tree*/}
-
-Cuando se le da un estado a un componente, podrías pensar que el estado "vive" dentro del componente. Pero en realidad el estado se mantiene en React. React asocia cada pieza de estado que mantiene con el componente correcto gracias al lugar que ocupa ese componente en el árbol de la UI.
+React construye [árboles de renderizado](learn/understanding-your-ui-as-a-tree#the-render-tree) para la estructura de componentes en tu UI.
 
+Cuando le das estado a tu componente, podrías pensar que el estado "vive" dentro del componente. Pero el estado en realidad se guarda dentro de React. React asocia cada pieza de estado que mantiene con el componente correcto por la posición en la que se encuentra ese componente en el árbol de renderizado.
 
 En este caso, sólo hay una etiqueta JSX  `<Counter />`, pero se representa en dos posiciones diferentes:
 
@@ -190,7 +174,7 @@ Actualización del estado
 </DiagramGroup>
 
 
-React mantendrá el estado mientras se renderice el mismo componente en la misma posición. Para ver esto, incrementa ambos contadores, luego quita el segundo componente desmarcando la casilla "Renderizar el segundo contador", y luego vuelve a añadirlo marcándola de nuevo:
+React mantendrá el estado mientras se renderice el mismo componente en la misma posición en el árbol. Para ver esto, incrementa ambos contadores, luego quita el segundo componente desmarcando la casilla "Renderizar el segundo contador", y luego vuelve a añadirlo marcándola de nuevo:
 
 <Sandpack>
 

src/content/learn/typescript.md

@@ -460,4 +460,4 @@ Recomendamos los siguientes recursos:
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) es una hoja de referencia mantenida por la comunidad que trata sobre cómo utilizar TypeScript con React, abordando muchos casos útiles y proporcionando un enfoque más amplio que este documento.
 
- - [TypeScript Community Discord](https://discord.com/invite/typescript) es excelente lugar para hacer preguntas y obtener ayuda con problemas de TypeScript y React.
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) es un lugar excelente para hacer preguntas y obtener ayuda con problemas de TypeScript y React.