Skip to content

Commit 5335758

Browse files
carburocarburo
authored
Merge pull request #922 from reactjs/sync-9967ded3
Sync with react.dev @ 9967ded
2 parents 45e96dc + d407cc7 commit 5335758

File tree

9 files changed

+333
-12
lines changed

9 files changed

+333
-12
lines changed

‎src/content/community/conferences.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ May 22 - 24, 2024. In-person in Kraków, Poland + remote
4545

4646
[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
4747

48+
### Frontend Nation 2024 {/*frontend-nation-2024*/}
49+
June 4 - 7, 2024. Online
50+
51+
[Website](https://frontendnation.com/) - [Twitter](https://twitter.com/frontendnation)
52+
4853
### React Summit 2024 {/*react-summit-2024*/}
4954
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
5055

‎src/content/community/team.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Engineer at Meta
3131
</TeamMember>
3232

3333
<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Gerente de ingeniería en Meta">
34-
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.
34+
Jason abandonó _Embedded C_ para dedicarse a la ingeniería de front-end y nunca miró hacia atrás. Armado con un conocimiento esotérico de CSS y una pasión por las interfaces de usuario hermosas, Jason se unió a Facebook en 2010, donde ahora se siente privilegiado de haber presenciado el desarrollo de JavaScript. Aunque puede que no comprenda cómo funcionan los bucles `for...of`, le encanta trabajar con personas brillantes en proyectos que permiten una experiencia de usuario asombrosa.
3535
</TeamMember>
3636

3737
<TeamMember name="Joe Savona" permalink="joe-savona" photo="/images/team/joe.jpg" github="josephsavona" twitter="en_JS" threads="joesavona" title="Ingeniero en Meta">

‎src/content/learn/react-compiler.md

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
---
2+
title: React Compiler
3+
---
4+
5+
<Intro>
6+
This page will give you an introduction to the new experimental React Compiler and how to try it out successfully.
7+
</Intro>
8+
9+
<Wip>
10+
These docs are still a work in progress. More documentation is available in the [React Compiler Working Group repo](https://github.com/reactwg/react-compiler/discussions), and will be upstreamed into these docs when they are more stable.
11+
</Wip>
12+
13+
<YouWillLearn>
14+
15+
* Getting started with the compiler
16+
* Installing the compiler and eslint plugin
17+
* Troubleshooting
18+
19+
</YouWillLearn>
20+
21+
<Note>
22+
React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.
23+
24+
React Compiler requires React 19 Beta.
25+
</Note>
26+
27+
React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it.
28+
29+
The compiler also includes an [eslint plugin](#installing-eslint-plugin-react-compiler) that surfaces the analysis from the compiler right in your editor. The plugin runs independently of the compiler and can be used even if you aren't using the compiler in your app. We recommend all React developers to use this eslint plugin to help improve the quality of your codebase.
30+
31+
### What does the compiler do? {/*what-does-the-compiler-do*/}
32+
33+
The compiler understands your code at a deep level through its understanding of plain JavaScript semantics and the [Rules of React](/reference/rules). This allows it to add automatic optimizations to your code.
34+
35+
You may be familiar today with manual memoization through [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). The compiler can automatically do this for you, if your code follows the [Rules of React](/reference/rules). If it detects breakages of the rules, it will automatically skip over just those components or hooks, and continue safely compiling other code.
36+
37+
If your codebase is already very well memoized, you might not expect to see major performance improvements with the compiler. However, in practice memoizing the correct dependencies that cause performance issues is tricky to get right by hand.
38+
39+
### Should I try out the compiler? {/*should-i-try-out-the-compiler*/}
40+
41+
Please note that the compiler is still experimental and has many rough edges. While it has been used in production at companies like Meta, rolling out the compiler to production for your app will depend on the health of your codebase and how well you've followed the [Rules of React](/reference/rules).
42+
43+
**You don't have to rush into using the compiler now. It's okay to wait until it reaches a stable release before adopting it.** However, we do appreciate trying it out in small experiments in your apps so that you can [provide feedback](#reporting-issues) to us to help make the compiler better.
44+
45+
## Getting Started {/*getting-started*/}
46+
47+
In addition to these docs, we recommend checking the [React Compiler Working Group](https://github.com/reactwg/react-compiler) for additional information and discussion about the compiler.
48+
49+
### Rolling out the compiler to your codebase {/*using-the-compiler-effectively*/}
50+
51+
#### Existing projects {/*existing-projects*/}
52+
The compiler is designed to compile functional components and hooks that follow the [Rules of React](/reference/rules). It can also handle code that breaks those rules by bailing out (skipping over) those components or hooks. However, due to the flexible nature of JavaScript, the compiler cannot catch every possible violation and may compile with false negatives: that is, the compiler may accidentally compile a component/hook that breaks the Rules of React which can lead to undefined behavior.
53+
54+
For this reason, to adopt the compiler successfully on existing projects, we recommend running it on a small directory in your product code first. You can do this by configuring the compiler to only run on a specific set of directories:
55+
56+
```js {3}
57+
const ReactCompilerConfig = {
58+
sources: (filename) => {
59+
return filename.indexOf('src/path/to/dir') !== -1;
60+
},
61+
};
62+
```
63+
64+
In rare cases, you can also configure the compiler to run in "opt-in" mode using the `compilationMode: "annotation"` option. This makes it so the compiler will only compile components and hooks annotated with a `"use memo"` directive. Please note that the `annotation` mode is a temporary one to aid early adopters, and that we don't intend for the `"use memo"` directive to be used for the long term.
65+
66+
```js {2,7}
67+
const ReactCompilerConfig = {
68+
compilationMode: "annotation",
69+
};
70+
71+
// src/app.jsx
72+
export default function App() {
73+
"use memo";
74+
// ...
75+
}
76+
```
77+
78+
When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.
79+
80+
#### New projects {/*new-projects*/}
81+
82+
If you're starting a new project, you can enable the compiler on your entire codebase, which is the default behavior.
83+
84+
## Installation {/*installation*/}
85+
86+
### Checking compatibility {/*checking-compatibility*/}
87+
88+
Prior to installing the compiler, you can first check to see if your codebase is compatible:
89+
90+
<TerminalBlock>
91+
npx react-compiler-healthcheck
92+
</TerminalBlock>
93+
94+
This script will:
95+
96+
- Check how many components can be successfully optimized: higher is better
97+
- Check for `<StrictMode>` usage: having this enabled and followed means a higher chance that the [Rules of React](/reference/rules) are followed
98+
- Check for incompatible library usage: known libaries that are incompatible with the compiler
99+
100+
As an example:
101+
102+
<TerminalBlock>
103+
Successfully compiled 8 out of 9 components.
104+
StrictMode usage not found.
105+
Found no usage of incompatible libraries.
106+
</TerminalBlock>
107+
108+
### Installing eslint-plugin-react-compiler {/*installing-eslint-plugin-react-compiler*/}
109+
110+
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.
111+
112+
<TerminalBlock>
113+
npm install eslint-plugin-react-compiler
114+
</TerminalBlock>
115+
116+
Then, add it to your eslint config:
117+
118+
```js
119+
module.exports = {
120+
plugins: [
121+
'eslint-plugin-react-compiler',
122+
],
123+
rules: {
124+
'react-compiler/react-compiler': "error",
125+
},
126+
}
127+
```
128+
129+
### Usage with Babel {/*usage-with-babel*/}
130+
131+
<TerminalBlock>
132+
npm install babel-plugin-react-compiler
133+
</TerminalBlock>
134+
135+
The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
136+
137+
After installing, add it to your Babel config. Please note that it's critical that the compiler run **first** in the pipeline:
138+
139+
```js {7}
140+
// babel.config.js
141+
const ReactCompilerConfig = { /* ... */ };
142+
143+
module.exports = function () {
144+
return {
145+
plugins: [
146+
['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
147+
// ...
148+
],
149+
};
150+
};
151+
```
152+
153+
`babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis.
154+
155+
### Usage with Vite {/*usage-with-vite*/}
156+
157+
If you use Vite, you can add the plugin to vite-plugin-react:
158+
159+
```js {10}
160+
// vite.config.js
161+
const ReactCompilerConfig = { /* ... */ };
162+
163+
export default defineConfig(() => {
164+
return {
165+
plugins: [
166+
react({
167+
babel: {
168+
plugins: [
169+
["babel-plugin-react-compiler", ReactCompilerConfig],
170+
],
171+
},
172+
}),
173+
],
174+
// ...
175+
};
176+
});
177+
```
178+
179+
### Usage with Next.js {/*usage-with-nextjs*/}
180+
181+
Next.js has an experimental configuration to enable the React Compiler. It automatically ensures Babel is set up with `babel-plugin-react-compiler`.
182+
183+
- Install Next.js canary, which uses React 19 Release Candidate
184+
- Install `babel-plugin-react-compiler`
185+
186+
<TerminalBlock>
187+
npm install next@canary babel-plugin-react-compiler
188+
</TerminalBlock>
189+
190+
Then configure the experimental option in `next.config.js`:
191+
192+
```js {4,5,6}
193+
// next.config.js
194+
/** @type {import('next').NextConfig} */
195+
const nextConfig = {
196+
experimental: {
197+
reactCompiler: true,
198+
},
199+
};
200+
201+
module.exports = nextConfig;
202+
```
203+
204+
Using the experimental option ensures support for the React Compiler in:
205+
206+
- App Router
207+
- Pages Router
208+
- Webpack (default)
209+
- Turbopack (opt-in through `--turbo`)
210+
211+
212+
### Usage with Remix {/*usage-with-remix*/}
213+
Install `vite-plugin-babel`, and add the compiler's Babel plugin to it:
214+
215+
<TerminalBlock>
216+
npm install vite-plugin-babel
217+
</TerminalBlock>
218+
219+
```js {2,14}
220+
// vite.config.js
221+
import babel from "vite-plugin-babel";
222+
223+
const ReactCompilerConfig = { /* ... */ };
224+
225+
export default defineConfig({
226+
plugins: [
227+
remix({ /* ... */}),
228+
babel({
229+
filter: /\.[jt]sx?$/,
230+
babelConfig: {
231+
presets: ["@babel/preset-typescript"], // if you use TypeScript
232+
plugins: [
233+
["babel-plugin-react-compiler", ReactCompilerConfig],
234+
],
235+
},
236+
}),
237+
],
238+
});
239+
```
240+
241+
### Usage with Webpack {/*usage-with-webpack*/}
242+
243+
You can create your own loader for React Compiler, like so:
244+
245+
```js
246+
const ReactCompilerConfig = { /* ... */ };
247+
const BabelPluginReactCompiler = require('babel-plugin-react-compiler');
248+
249+
function reactCompilerLoader(sourceCode, sourceMap) {
250+
// ...
251+
const result = transformSync(sourceCode, {
252+
// ...
253+
plugins: [
254+
[BabelPluginReactCompiler, ReactCompilerConfig],
255+
],
256+
// ...
257+
});
258+
259+
if (result === null) {
260+
this.callback(
261+
Error(
262+
`Failed to transform "${options.filename}"`
263+
)
264+
);
265+
return;
266+
}
267+
268+
this.callback(
269+
null,
270+
result.code
271+
result.map === null ? undefined : result.map
272+
);
273+
}
274+
275+
module.exports = reactCompilerLoader;
276+
```
277+
278+
### Usage with Expo {/*usage-with-expo*/}
279+
280+
Expo uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
281+
282+
### Usage with React Native (Metro) {/*usage-with-react-native-metro*/}
283+
284+
React Native uses Babel via Metro, so refer to the [Usage with Babel](#usage-with-babel) section for installation instructions.
285+
286+
## Troubleshooting {/*troubleshooting*/}
287+
288+
### Reporting Issues {/*reporting-issues*/}
289+
290+
To report issues, please first create a minimal repro on the [React Compiler Playground](https://playground.react.dev/) and include it in your bug report.
291+
292+
You can open issues in the [facebook/react](https://github.com/facebook/react/issues) repo.
293+
294+
You can also provide feedback in the React Compiler Working Group by applying to be a member. Please see [the README for more details on joining](https://github.com/reactwg/react-compiler).
295+
296+
### Common Issues {/*common-issues*/}
297+
298+
#### `(0 , _c) is not a function` error {/*0--_c-is-not-a-function-error*/}
299+
300+
This occurs during JavaScript module evaluation when you are not using React 19 Beta and up. To fix this, [upgrade your app to React 19 Beta](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) first.
301+
302+
### Debugging {/*debugging*/}
303+
304+
#### Checking if components have been optimized {/*checking-if-components-have-been-optimized*/}
305+
##### React DevTools {/*react-devtools*/}
306+
307+
React Devtools (v5.0+) has built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
308+
309+
##### Other issues {/*other-issues*/}
310+
311+
Please see https://github.com/reactwg/react-compiler/discussions/7.

‎src/content/learn/separating-events-from-effects.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: 'Separar eventos de Efectos'
44

55
<Intro>
66

7-
Los controladores de eventos solo se vuelven a ejecutar cuando vuelves a realizar la misma interacción. A diferencia de los controladores de eventos, los Efectos se resincronizan si algún valor que leen, como una prop o una variable de estado, es diferente de lo que era durante la última renderización. A veces, también quieres una mezcla de ambos comportamientos: un Efecto que se vuleve a ejecutar en respuesta a algunos valores pero no a otros. Esta página te enseñará cómo hacerlo.
7+
Los controladores de eventos solo se vuelven a ejecutar cuando vuelves a realizar la misma interacción. A diferencia de los controladores de eventos, los Efectos se resincronizan si algún valor que leen, como una prop o una variable de estado, es diferente de lo que era durante el último renderizado. A veces, también quieres una mezcla de ambos comportamientos: un Efecto que se vuelve a ejecutar en respuesta a algunos valores pero no a otros. Esta página te enseñará cómo hacerlo.
88

99
</Intro>
1010

@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
4444
return (
4545
<>
4646
<input value={message} onChange={e => setMessage(e.target.value)} />
47-
<button onClick={handleSendClick}>Enviar</button>;
47+
<button onClick={handleSendClick}>Enviar</button>
4848
</>
4949
);
5050
}
@@ -72,7 +72,7 @@ function ChatRoom({ roomId }) {
7272
}
7373
```
7474

75-
Con este código, puedes estar seguro que siempre hay una conexión activa al servidor de chat seleccionado actualmente, *independientemente* de las interacciones específicas realizadas por el usuario. Si el usuario solo ha abierto tu aplicación, seleccionado una sala diferente o navegado a otra pantalla y volvió, tu Efecto garantiza que el componente *permanecerá sincronizado* con la sala seleccionada a ctualmente, y [volverá a conectarse cuando sea necesario.](/learn/lifecycle-of-reactive-effects#why-synchronization-may-need-to-happen-more-than-once)
75+
Con este código, puedes estar seguro que siempre hay una conexión activa al servidor de chat seleccionado actualmente, *independientemente* de las interacciones específicas realizadas por el usuario. Si el usuario solo ha abierto tu aplicación, seleccionado una sala diferente o navegado a otra pantalla y volvió, tu Efecto garantiza que el componente *permanecerá sincronizado* con la sala seleccionada a actualmente, y [volverá a conectarse cuando sea necesario.](/learn/lifecycle-of-reactive-effects#why-synchronization-may-need-to-happen-more-than-once)
7676

7777
<Sandpack>
7878

@@ -226,7 +226,7 @@ Los Efectos son reactivos, por lo que `createConnection(serverUrl, roomId)` y `c
226226

227227
## Extraer lógica no reactiva fuera de los Efectos {/*extracting-non-reactive-logic-out-of-effects*/}
228228

229-
Las cosas se vuelven más complicadas cuando tu quieres combinar lógica reactiva con lógina no reactiva.
229+
Las cosas se vuelven más complicadas cuando tu quieres combinar lógica reactiva con lógica no reactiva.
230230

231231
Por ejemplo, imagina que quieres mostrar una notificación cuando el usuario se conecta al chat. Lees el tema actual (oscuro o claro) de los accesorios para poder mostrar la notificación en el color correcto:
232232

@@ -654,7 +654,7 @@ function Page({ url }) {
654654
655655
Aquí, `onVisit` es un Evento de Efecto. El código que contiene no es reactivo. Por eso puedes usar `numberOfItems` (¡o cualquier otro valor reactivo!) sin preocuparte de que cause que el código circundante se vuelva a ejecutar con los cambios.
656656
657-
Por otro lado, el Efecto en sí sigue siendo reactivo. El código dentro del Efecto utiliza la propiedad `url`, por lo que el Efecto se volverá a ejecutar después de cada re-renderización con una `url` diferente. Esto, a su vez, llamará al Evento de Efecto "onVisit".
657+
Por otro lado, el Efecto en sí sigue siendo reactivo. El código dentro del Efecto utiliza la propiedad `url`, por lo que el Efecto se volverá a ejecutar después de cada rerenderizado con una `url` diferente. Esto, a su vez, llamará al Evento de Efecto "onVisit".
658658
659659
Como resultado, se llamará a `logVisit` por cada cambio en la `url`, y siempre se leerá el último `numberOfItems`. Sin embargo, si `numberOfItems` cambia por sí mismo, esto no hará que se vuelva a ejecutar el código.
660660

‎src/content/reference/react-dom/components/form.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -375,8 +375,8 @@ export async function signUpNewUser(newEmail) {
375375
```json package.json hidden
376376
{
377377
"dependencies": {
378-
"react": "18.3.0-canary-6db7f4209-20231021",
379-
"react-dom": "18.3.0-canary-6db7f4209-20231021",
378+
"react": "canary",
379+
"react-dom": "canary",
380380
"react-scripts": "^5.0.0"
381381
},
382382
"main": "/index.js",

0 commit comments

Comments
 (0)