Using React Refs

Refs provide a way to access DOM nodes or React elements created in the render method. More info

Articles & Tutorials

Why you shouldn't put refs in a dependency array (
May 21, 2021
If you use a ref in your effect callback, shouldn't it be included in the dependencies? Why refs are a special exception to the rule!
Scroll a React Component Into View (
Jul 10, 2020
React has an easy way to access DOM APIs of HTML elements through references. We learn how React exposes HTML elements by scrolling an element into view on the click of a button.
  • Robin van der Vleuten
How to use React Ref (
Apr 25, 2020
In this React Ref tutorial, I want to give you a step by step introduction to refs in React.
Understanding Ref Forwarding in React (
Mar 31, 2020
How and when to use React.forwardRef
  • Chidume Nnamdi
Working with refs in React (
Mar 04, 2020
Refs make it possible to access DOM nodes directly within React.
  • Kingsley Silas
Why you should use refs sparingly in production (
Feb 28, 2020
In this post, we’ll take a closer look at React refs and try to understand why it might not be a great idea to use them in production-grade applications.
  • Peter Ekene Eze
React.useRef and React.createRef: The Difference (
Feb 27, 2020
The similarities and differences of React.useRef and React.createRef.
  • Chidume Nnamdi
A guide to React refs: useRef and createRef (
Jan 17, 2020
In this article, we’re going to investigate why React, a framework meant to abstract your code away from DOM manipulation, leaves the door open for developers to access it.
  • Jeremias Menichelli
Cleaning up the DOM with ForwardRef in React (
Nov 09, 2019
Ref forwarding in React is a feature that lets components pass down (“forward”) refs to their children. It gives the child component a reference to a DOM element created by its parent component. This then allows the child to read and modify that element anywhere it is being used.
  • Peter Ekene Eze
Merging React Refs (
Oct 20, 2019
useRef and createRef are not the only API calls you might be interested in.
  • Anton Korzunov
Redoing search UI with React Context and refs (
Sep 12, 2019
In this article, we’ll cover the following: Context: basic usage and strategies for injecting data anywhere in your component tree; Refs: what they are and why our use case calls for them.
  • Ryan Harris
Reusing the `ref` from `forwardRef` with React hooks (
Aug 26, 2019
I guess, we all started already to use new cool features from React v16. One of them is the new way to forward refs to our components.
  • Daniel Ostapenko
A Guide for Refs in React (
Aug 18, 2019
Sometimes when using React.js you’ll need an escape hatch to write imperative-style code to interact directly with DOM elements. Using React’s createRef method allows you to do just that!
  • William Le
The Hitchhikers Guide to Refs (
Mar 14, 2019
React has this feature called refs. A ref is what the React docs call an "escape hatch", and lets you interact with instances of stuff. They should be used sparingly, but can be pretty useful at times.
  • Kristofer Selbekk
useRef() and Concurrent Mode: how to avoid shooting yourself in the foot (
Mar 05, 2019
React's eaglerly awaited Concurrent Mode can vastly improve user experience, but it requires a stricter way of writing components.
  • Daishi Kato
Refs in React: All you need to know! (
Aug 14, 2017
Last evening while looking into a popular react library, I came across ‘refs’ and even knowing it how it works i wasn’t quite convinced with my understanding so decided to dive more deeper into it and finally sharing my thoughts with you people.
  • Ankit Singh
When to use React's Ref on a DOM node in React (
Mar 22, 2017
What about the ref attribute in React.js? This article gives you clarification around the ref attribute to access DOM nodes in React. It shows you how you can use it, when you should use it and where it can be used and where it shouldn't be used.

Video Guides & Talks

How to ensure your useRef's will work correctly in React concurrent mode (
Aug 19, 2019
`useRef` is an extremely handy tool, but it comes with a few pitfalls if you don't think carefully about the way you use it. With React Concurrent mode on the horizon, I'll give you a few tips you'll need to make sure you don't break your app with useRef when things go concurrent.
  • Tanner Linsley
When and how you use React refs (
Apr 21, 2018
You should never ever under absolutely no circumstances ever need to use direct DOM manipulation in a React component.
Using Refs in React (
Feb 25, 2018
We'll go over the 3 ways to create refs in React: string refs (don't use!), callback refs, and the new React.createRef() approach.

Courses & Video Series

Leverage New Features of React 16 (
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.