You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: src/content/blog/2024/12/05/react-19.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ Additions since this post was originally shared with the React 19 RC in April:
17
17
-**Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense).
18
18
-**React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis).
19
19
20
-
_The date for this post has been update to reflect the stable release date._
20
+
_The date for this post has been updated to reflect the stable release date._
21
21
22
22
</Note>
23
23
@@ -362,7 +362,7 @@ React 19 includes all of the React Server Components features included from the
362
362
363
363
#### How do I build support for Server Components? {/*how-do-i-build-support-for-server-components*/}
364
364
365
-
While React Server Components in React 19 are stable and will not break between major versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
365
+
While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x.
366
366
367
367
To support React Server Components as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement React Server Components in the future.
368
368
@@ -807,4 +807,4 @@ Thanks to [Joey Arhar](https://github.com/josepharhar) for driving the design an
Copy file name to clipboardexpand all lines: src/content/community/team.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -43,7 +43,7 @@ Current members of the React team are listed in alphabetical order below.
43
43
</TeamMember>
44
44
45
45
<TeamMembername="Lauren Tan"permalink="lauren-tan"photo="/images/team/lauren.jpg"github="poteto"twitter="potetotes"threads="potetotes"bsky="no.lol"title="Engineer at Meta">
46
-
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel instead of Java. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, and petting her dog Zelda.
46
+
Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
47
47
</TeamMember>
48
48
49
49
<TeamMembername="Luna Wei"permalink="luna-wei"photo="/images/team/luna-wei.jpg"github="lunaleaps"twitter="lunaleaps"threads="lunaleaps"title="Engineer at Meta">
Copy file name to clipboardexpand all lines: src/content/learn/manipulating-the-dom-with-refs.md
+24-68
Original file line number
Diff line number
Diff line change
@@ -343,75 +343,39 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu
343
343
344
344
## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}
345
345
346
-
When you put a ref on a built-in component that outputs a browser element like `<input />`, React will set that ref's `current` property to the corresponding DOM node (such as the actual `<input />` in the browser).
346
+
<Pitfall>
347
+
Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
348
+
</Pitfall>
347
349
348
-
However, if you try to put a ref on **your own** component, like `<MyInput />`, by default you will get `null`. Here is an example demonstrating it. Notice how clicking the button **does not** focus the input:
350
+
You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
349
351
350
-
<Sandpack>
351
-
352
-
```js
352
+
```js {3-4,9}
353
353
import { useRef } from'react';
354
354
355
-
functionMyInput(props) {
356
-
return<input {...props} />;
355
+
functionMyInput({ ref }) {
356
+
return<input ref={ref} />;
357
357
}
358
358
359
-
exportdefaultfunctionMyForm() {
359
+
functionMyForm() {
360
360
constinputRef=useRef(null);
361
-
362
-
functionhandleClick() {
363
-
inputRef.current.focus();
364
-
}
365
-
366
-
return (
367
-
<>
368
-
<MyInput ref={inputRef} />
369
-
<button onClick={handleClick}>
370
-
Focus the input
371
-
</button>
372
-
</>
373
-
);
361
+
return<MyInput ref={inputRef} />
374
362
}
375
363
```
376
364
377
-
</Sandpack>
378
-
379
-
To help you notice the issue, React also prints an error to the console:
380
-
381
-
<ConsoleBlocklevel="error">
382
-
383
-
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
384
-
385
-
</ConsoleBlock>
386
-
387
-
This happens because by default React does not let a component access the DOM nodes of other components. Not even for its own children! This is intentional. Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.
388
-
389
-
Instead, components that _want_ to expose their DOM nodes have to **opt in** to that behavior. A component can specify that it "forwards" its ref to one of its children. Here's how `MyInput` can use the `forwardRef` API:
390
-
391
-
```js
392
-
constMyInput=forwardRef((props, ref) => {
393
-
return<input {...props} ref={ref} />;
394
-
});
395
-
```
396
-
397
-
This is how it works:
398
-
399
-
1.`<MyInput ref={inputRef} />` tells React to put the corresponding DOM node into `inputRef.current`. However, it's up to the `MyInput` component to opt into that--by default, it doesn't.
400
-
2. The `MyInput` component is declared using `forwardRef`. **This opts it into receiving the `inputRef` from above as the second `ref` argument** which is declared after `props`.
401
-
3.`MyInput` itself passes the `ref` it received to the `<input>` inside of it.
365
+
In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
402
366
403
-
Now clicking the button to focusthe input works:
367
+
The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
404
368
405
369
<Sandpack>
406
370
407
371
```js
408
-
import { forwardRef, useRef } from'react';
372
+
import { useRef } from'react';
409
373
410
-
constMyInput=forwardRef((props,ref) => {
411
-
return<input {...props} ref={ref} />;
412
-
});
374
+
functionMyInput({ ref }) {
375
+
return<input ref={ref} />;
376
+
}
413
377
414
-
exportdefaultfunctionForm() {
378
+
exportdefaultfunctionMyForm() {
415
379
constinputRef=useRef(null);
416
380
417
381
functionhandleClick() {
@@ -431,33 +395,27 @@ export default function Form() {
431
395
432
396
</Sandpack>
433
397
434
-
In design systems, it is a common pattern for low-level components like buttons, inputs, and so on, to forward their refs to their DOM nodes. On the other hand, high-level components like forms, lists, or page sections usually won't expose their DOM nodes to avoid accidental dependencies on the DOM structure.
435
-
436
398
<DeepDive>
437
399
438
400
#### Exposing a subset of the API with an imperative handle {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
439
401
440
-
In the above example, `MyInput`exposes the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with `useImperativeHandle`:
402
+
In the above example, the ref passed to `MyInput`is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
@@ -469,17 +427,15 @@ export default function Form() {
469
427
return (
470
428
<>
471
429
<MyInput ref={inputRef} />
472
-
<button onClick={handleClick}>
473
-
Focus the input
474
-
</button>
430
+
<button onClick={handleClick}>Focus the input</button>
475
431
</>
476
432
);
477
433
}
478
434
```
479
435
480
436
</Sandpack>
481
437
482
-
Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, `useImperativeHandle` instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside `useImperativeHandle` call.
438
+
Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
483
439
484
440
</DeepDive>
485
441
@@ -591,7 +547,7 @@ export default function TodoList() {
Copy file name to clipboardexpand all lines: src/content/learn/react-compiler.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -347,7 +347,7 @@ React Compiler can verify many of the Rules of React statically, and will safely
347
347
348
348
### How do I know my components have been optimized? {/*how-do-i-know-my-components-have-been-optimized*/}
349
349
350
-
[React Devtools](/learn/react-developer-tools) (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.
350
+
[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
351
351
352
352
### Something is not working after compilation {/*something-is-not-working-after-compilation*/}
353
353
If you have eslint-plugin-react-compiler installed, the compiler will display any violations of the rules of React in your editor. When it does this, it means that the compiler has skipped over optimizing that component or hook. This is perfectly okay, and the compiler can recover and continue optimizing other components in your codebase. **You don't have to fix all ESLint violations straight away.** You can address them at your own pace to increase the amount of components and hooks being optimized.
0 commit comments