Sync with react.dev @ e85b71de

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/react-collapsed@3.1.0-forked.1",
+    "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/learn/typescript.md

@@ -284,7 +284,11 @@ export default App = AppTSX;
 
 </Sandpack>
 
+<<<<<<< HEAD
 Esta técnica funciona cuando tienes un valor por defecto que tiene sentido - pero hay casos ocasionales en los que no, y en esos casos `null` puede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu código, necesitas establecer explícitamente `ContextShape | null` en el `createContext`.
+=======
+This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
+>>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4
 
 Esto causa el problema de que necesitas eliminar el `| null` en el tipo para los consumidores de contexto. Nuestra recomendación es que el hook compruebe su existencia en tiempo de ejecución y lance un error si no está presente:
 
@@ -460,4 +464,8 @@ 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.
 
+<<<<<<< HEAD
  - [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) is a great place to ask questions and get help with TypeScript and React issues.
+>>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4

src/content/reference/react-dom/server/renderToPipeableStream.md

@@ -286,8 +286,14 @@ El *streaming* no necesita esperar a que React se cargue en el navegador o a que
 
 **Sólo se activará el componente Suspense con fuentes de datos habilitadas para Suspense.** Estas incluyen:
 
+<<<<<<< HEAD
 - Obtención de datos con *frameworks* habilitados para Suspense, como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Carga diferida de código de componentes con [`lazy`](/reference/react/lazy)
+=======
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+>>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4
 
 Suspense **no** detectará cuando se obtengan datos dentro de un Efecto o controlador de evento.
 

src/content/reference/react-dom/server/renderToReadableStream.md

@@ -285,8 +285,14 @@ Cuando se streamea no es necesario esperar a que React en sí mismo cargue en el
 
 **Solo las fuentes de información "Suspense-enabled" activarán el componente Suspense.** Estas incluyen:
 
+<<<<<<< HEAD
 - Obtención de datos con frameworks "Suspense-enabled" como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Código de componentes lazy-loading con [`lazy`](/reference/react/lazy)
+=======
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+>>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4
 
 Suspense **no** detecta cuando la información es obtenida dentro de un Hook de efecto o un controlador de eventos.
 

src/content/reference/react/Suspense.md

@@ -252,8 +252,14 @@ async function getAlbums() {
 
 **Sólo las fuentes de datos habilitadas para Suspense activarán un componente Suspense.** Entre ellas se incluyen:
 
+<<<<<<< HEAD
 - Carga de datos en frameworks capaces de manejar Suspense como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Código de carga diferida de componentes con [`lazy`](/reference/react/lazy)
+=======
+- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
+- Lazy-loading component code with [`lazy`](/reference/react/lazy)
+- Reading the value of a Promise with [`use`](/reference/react/use)
+>>>>>>> e85b71de88a20cda9588f51f01d4a70e5cbe1cb4
 
 Suspense **no** detecta la carga de datos cuando se hace en un Efecto o un controlador de evento.
 

src/content/reference/react/cache.md

@@ -414,7 +414,7 @@ See prior mentioned pitfalls
 
 If none of the above apply, it may be a problem with how React checks if something exists in cache.
 
-If your arguments are not [primatives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference.
+If your arguments are not [primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) (ex. objects, functions, arrays), ensure you're passing the same object reference.
 
 When calling a memoized function, React will look up the input arguments to see if a result is already cached. React will use shallow equality of the arguments to determine if there is a cache hit.
 

src/content/reference/react/experimental_taintObjectReference.md

@@ -0,0 +1,153 @@
+---
+title: experimental_taintObjectReference
+---
+
+<Wip>
+
+**This API is experimental and is not available in a stable version of React yet.**
+
+You can try it by upgrading React packages to the most recent experimental version:
+
+- `react@experimental`
+- `react-dom@experimental`
+- `eslint-plugin-react-hooks@experimental`
+
+Experimental versions of React may contain bugs. Don't use them in production.
+
+This API is only available inside React Server Components.
+
+</Wip>
+
+
+<Intro>
+
+`taintObjectReference` lets you prevent a specific object instance from being passed to a Client Component like a `user` object.
+
+```js
+experimental_taintObjectReference(message, object);
+```
+
+To prevent passing a key, hash or token, see [`taintUniqueValue`](/reference/react/experimental_taintUniqueValue).
+
+</Intro>
+
+<InlineToc />
+
+---
+
+## Reference {/*reference*/}
+
+### `taintObjectReference(message, object)` {/*taintobjectreference*/}
+
+Call `taintObjectReference` with an object to register it with React as something that should not be allowed to be passed to the Client as is:
+
+```js
+import {experimental_taintObjectReference} from 'react';
+
+experimental_taintObjectReference(
+  'Do not pass ALL environment variables to the client.',
+  process.env
+);
+```
+
+[See more examples below.](#usage)
+
+#### Parameters {/*parameters*/}
+
+* `message`: The message you want to display if the object gets passed to a Client Component. This message will be displayed as a part of the Error that will be thrown if the object gets passed to a Client Component.
+
+* `object`: The object to be tainted. Functions and class instances can be passed to `taintObjectReference` as `object`. Functions and classes are already blocked from being passed to Client Components but the React's default error message will be replaced by what you defined in `message`. When a specific instance of a Typed Array is passed to `taintObjectReference` as `object`, any other copies of the Typed Array will not be tainted.
+
+#### Returns {/*returns*/}
+
+`experimental_taintObjectReference` returns `undefined`.
+
+#### Caveats {/*caveats*/}
+
+- Recreating or cloning a tainted object creates a new untained object which main contain sensetive data. For example, if you have a tainted `user` object, `const userInfo = {name: user.name, ssn: user.ssn}` or `{...user}` will create new objects which are not tainted. `taintObjectReference` only protects against simple mistakes when the object is passed through to a Client Component unchanged.
+
+<Pitfall>
+
+**Do not rely on just tainting for security.** Tainting an object doesn't prevent leaking of every possible derived value. For example, the clone of a tainted object will create a new untained object. Using data from a tainted object (e.g. `{secret: taintedObj.secret}`) will create a new value or object that is not tainted. Tainting is a layer of protection; a secure app will have multiple layers of protection, well designed APIs, and isolation patterns.
+
+</Pitfall>
+
+---
+
+## Usage {/*usage*/}
+
+### Prevent user data from unintentionally reaching the client {/*prevent-user-data-from-unintentionally-reaching-the-client*/}
+
+A Client Component should never accept objects that carry sensitive data. Ideally, the data fetching functions should not expose data that the current user should not have access to. Sometimes mistakes happen during refactoring. To protect against this mistakes happening down the line we can "taint" the user object in our data API.
+
+```js
+import {experimental_taintObjectReference} from 'react';
+
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  experimental_taintObjectReference(
+    'Do not pass the entire user object to the client. ' +
+      'Instead, pick off the specific properties you need for this use case.',
+    user,
+  );
+  return user;
+}
+```
+
+Now whenever anyone tries to pass this object to a Client Component, an error will be thrown with the passed in error message instead.
+
+<DeepDive>
+
+#### Protecting against leaks in data fetching {/*protecting-against-leaks-in-data-fetching*/}
+
+If you're running a Server Components environment that has access to sensitive data, you have to be careful not to pass objects straight through:
+
+```js
+// api.js
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  return user;
+}
+```
+
+```js
+import { getUser } from 'api.js';
+import { InfoCard } from 'components.js';
+
+export async function Profile(props) {
+  const user = await getUser(props.userId);
+  // DO NOT DO THIS
+  return <InfoCard user={user} />;
+}
+```
+
+```js
+// components.js
+"use client";
+
+export async function InfoCard({ user }) {
+  return <div>{user.name}</div>;
+}
+```
+
+Ideally, the `getUser` should not expose data that the current user should not have access to. To prevent passing the `user` object to a Client Component down the line we can "taint" the user object:
+
+
+```js
+// api.js
+import {experimental_taintObjectReference} from 'react';
+
+export async function getUser(id) {
+  const user = await db`SELECT * FROM users WHERE id = ${id}`;
+  experimental_taintObjectReference(
+    'Do not pass the entire user object to the client. ' +
+      'Instead, pick off the specific properties you need for this use case.',
+    user,
+  );
+  return user;
+}
+```
+
+Now if anyone tries to pass the `user` object to a Client Component, an error will be thrown with the passed in error message.
+
+</DeepDive>