Using React Refs

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

Articles & Tutorials

Redoing search UI with React Context and refs (blog.logrocket.com)
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 (itnext.io)
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 (alligator.io)
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 (dev.to)
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 (frontarm.com)
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
Working with refs in React (css-tricks.com)
Aug 16, 2018
Refs make it possible to access DOM nodes directly within React.
  • Kingsley Silas
Refs in React: All you need to know! (hackernoon.com)
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 (robinwieruch.de)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (egghead.io)
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.