Using React Refs

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!

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.

In this React Ref tutorial, I want to give you a step by step introduction to refs in React.

How and when to use React.forwardRef

Refs make it possible to access DOM nodes directly within React.

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.

The similarities and differences of React.useRef and React.createRef.

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.

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.

useRef and createRef are not the only API calls you might be interested in.

`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.

You should never ever under absolutely no circumstances ever need to use direct DOM manipulation in a React component.

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.

React 16 comes with some powerful new features, in this course we'll be exploring each of them.