Skip to content

Commit

Permalink
add back code block with error message
Browse files Browse the repository at this point in the history
  • Loading branch information
joshuaslate committed Dec 16, 2024
1 parent a945321 commit 4d77acd
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,10 @@ export default function MyForm() {

Instead, the application crashes because `inputRef.current` is `null`, due to `<MyInput />` not passing the `ref` prop down to one of its children.

<ConsoleBlock level="error">
Cannot read properties of null (reading 'focus')
</ConsoleBlock>

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.

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 by passing the `ref` prop down.
Expand Down

0 comments on commit 4d77acd

Please sign in to comment.