React Refs: An Escape Hatch for DOM Manipulation
A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.
A ref is a stable pointer to a DOM element, an escape hatch for direct, imperative control outside React's declarative state flow. It's essential for browser-level actions like programmatically focusing an input or scrolling to a section. The biggest mistake is treating refs like state; changing a ref's `.current` property does not trigger a re-render, so don't use them for anything that should visually update your component.
Read the original → react.dev
- #react
- #hooks
- #refs
- #dom
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.