Remove forwardRef references from useRef and Manipulating the DOM with Refs pages #7364

mattcarrollcode · 2024-12-13T21:50:02Z

Update the "useRef" and "Manipulating the DOM with Refs" pages to no longer use forwardRef since its no longer needed in React 19

vercel · 2024-12-13T21:50:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
19-react-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 17, 2024 9:10am
react-dev	✅ Ready (Inspect)	Visit Preview		Dec 17, 2024 9:10am

github-actions · 2024-12-13T21:51:56Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

gaearon · 2024-12-13T22:13:34Z

src/content/learn/manipulating-the-dom-with-refs.md


-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:
+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).


This is confusing. You need to walk through these stages:

Passing a ref to <input>

Creating your own component — it doesn't work anymore

Fixing it by spreading props

Spreading props isn't a default thing people would reach for.

The paragraph above doesn't match the code below because the code below introduces spreading.

Actually it might be better to remove spreading from examples below and just do ref={ref} so that it's obvious it works like any other prop

gaearon · 2024-12-13T22:18:46Z

src/content/reference/react/useRef.md


-const MyInput = forwardRef((props, ref) => {
+const MyInput = (props, ref) => {


Ref is a prop now, so it won't be a second argument. I'd suggest to directly pass it as a prop in this example and remove spreading to make the pattern very clear

gaearon · 2024-12-13T22:19:19Z

src/content/reference/react/useRef.md

-
-## Troubleshooting {/*troubleshooting*/}
-
-### I can't get a ref to a custom component {/*i-cant-get-a-ref-to-a-custom-component*/}


This is still a problem. You'll just get a ref with undefined current value and no warning. We need to change the wording of this but the problem is real and needs to be described.

gaearon

see above:

let's fix the examples to show passing ref directly without spreading
fix code example that has second argument, it's wrong
keep the troubleshooting section but reword to match the new problem

mattcarrollcode · 2024-12-17T09:41:01Z

see above:

let's fix the examples to show passing ref directly without spreading

fix code example that has second argument, it's wrong

keep the troubleshooting section but reword to match the new problem

Fixed!

gaearon · 2024-12-17T10:20:27Z

src/content/reference/react/useRef.md

-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
+const MyInput = ({ref}) => {


nit: we generally put spaces around destructuring like ({ ref }).

the rest of the docs also uses a function declaration style, like function Input({ ref }), no need for an arrow here

gaearon · 2024-12-17T10:20:49Z

src/content/learn/manipulating-the-dom-with-refs.md

 import { useRef } from 'react';

-function MyInput(props) {
-  return <input {...props} />;
+function MyInput({ref}) {


gaearon · 2024-12-17T10:22:22Z

src/content/learn/manipulating-the-dom-with-refs.md

@@ -343,75 +343,39 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu

 ## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}

-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).
+<Pitfall>
+Refs are an escape hatch that should be used sparingly. Manually manipulating _another_ component's DOM nodes makes your code even more fragile.


so i'm wondering if this is a bit too strong here... we're describing legit cases on this page (like focusing) but this makes it sound like even the stuff below is fragile

gaearon · 2024-12-17T10:22:59Z

src/content/learn/manipulating-the-dom-with-refs.md

-      </button>
-    </>
-  );
+  return <><MyInput ref={inputRef} /></>


this <> fragment isn't doing anything here

gaearon · 2024-12-17T10:23:41Z

src/content/learn/manipulating-the-dom-with-refs.md

-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
+function MyInput({ref}) {


nit: spacing

gaearon · 2024-12-17T10:24:01Z

src/content/learn/manipulating-the-dom-with-refs.md


-const MyInput = forwardRef((props, ref) => {
+const MyInput = ({ ref }) => {


this should just be a function declaration now, no need for arrow

function MyInput({ ref }) { // ... }

gaearon · 2024-12-17T10:25:10Z

src/content/reference/react/useRef.md


-const MyInput = forwardRef(({ value, onChange }, ref) => {
+```js {1,6}
+const MyInput = ({ value, onChange, ref}) => {


this should remain a function declaration, no need to change it to an arrow

export default function MyInput({ value, onChange, ref }) { // ... }

also don't miss the space after ref, it should be ref }) rather than ref})

gaearon

looks good if nits are addressed. please have a look at #7332 which was aiming to do the same — maybe something can be synthesized if you like any of those edits, these PRs seem similar in goals

facebook-github-bot added CLA Signed react core team labels Dec 13, 2024

mattcarrollcode requested a review from rickhanlonii December 13, 2024 21:50

vercel bot deployed to Preview – 19-react-dev December 13, 2024 21:50 View deployment

vercel bot deployed to Preview – react-dev December 13, 2024 21:51 View deployment

mattcarrollcode changed the base branch from main to react-19 December 13, 2024 22:01

gaearon reviewed Dec 13, 2024

View reviewed changes

gaearon requested changes Dec 13, 2024

View reviewed changes

vercel bot deployed to Preview – react-dev December 17, 2024 08:31 View deployment

vercel bot deployed to Preview – 19-react-dev December 17, 2024 08:31 View deployment

mattcarrollcode changed the base branch from react-19 to main December 17, 2024 09:02

mattcarrollcode force-pushed the ref-cleanup branch from 74581f3 to 5083ad6 Compare December 17, 2024 09:07

vercel bot deployed to Preview – react-dev December 17, 2024 09:08 View deployment

vercel bot deployed to Preview – 19-react-dev December 17, 2024 09:08 View deployment

mattcarrollcode added 3 commits December 17, 2024 01:09

Remove forwardRef referecnes from useRef

fb69425

update wording for clarity

b89d0b6

Address Dan's feedback

649211b

mattcarrollcode force-pushed the ref-cleanup branch from 5083ad6 to 649211b Compare December 17, 2024 09:09

vercel bot deployed to Preview – react-dev December 17, 2024 09:10 View deployment

vercel bot deployed to Preview – 19-react-dev December 17, 2024 09:10 View deployment

gaearon reviewed Dec 17, 2024

View reviewed changes

gaearon approved these changes Dec 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove forwardRef references from useRef and Manipulating the DOM with Refs pages #7364

Remove forwardRef references from useRef and Manipulating the DOM with Refs pages #7364

mattcarrollcode commented Dec 13, 2024

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

📦 Next.js Bundle Analysis for react-dev

gaearon Dec 13, 2024 •

edited

Loading

gaearon Dec 13, 2024

mattcarrollcode Dec 17, 2024

gaearon Dec 13, 2024

mattcarrollcode Dec 17, 2024

gaearon Dec 13, 2024

mattcarrollcode Dec 17, 2024

gaearon left a comment

mattcarrollcode commented Dec 17, 2024

gaearon Dec 17, 2024 •

edited

Loading

gaearon Dec 17, 2024

gaearon Dec 17, 2024

gaearon Dec 17, 2024

gaearon Dec 17, 2024

gaearon Dec 17, 2024 •

edited

Loading

gaearon Dec 17, 2024 •

edited

Loading

gaearon left a comment


		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:
		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).


		const MyInput = forwardRef((props, ref) => {
		const MyInput = (props, ref) => {


		## Troubleshooting {/troubleshooting/}

		### I can't get a ref to a custom component {/i-cant-get-a-ref-to-a-custom-component/}


		const MyInput = forwardRef((props, ref) => {
		const MyInput = ({ ref }) => {

Remove forwardRef references from useRef and Manipulating the DOM with Refs pages #7364

Are you sure you want to change the base?

Remove forwardRef references from useRef and Manipulating the DOM with Refs pages #7364

Conversation

mattcarrollcode commented Dec 13, 2024

vercel bot commented Dec 13, 2024 • edited Loading

github-actions bot commented Dec 13, 2024 • edited Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

gaearon Dec 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

mattcarrollcode commented Dec 17, 2024

gaearon Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

gaearon Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

gaearon left a comment

Choose a reason for hiding this comment

vercel bot commented Dec 13, 2024 •

edited

Loading

github-actions bot commented Dec 13, 2024 •

edited

Loading

gaearon Dec 13, 2024 •

edited

Loading

gaearon Dec 17, 2024 •

edited

Loading

gaearon Dec 17, 2024 •

edited

Loading

gaearon Dec 17, 2024 •

edited

Loading