Using React Refs

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

Articles & Tutorials

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

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.