Migrating DOM refs from createRef() to useRef()
In this lesson we replace React.createRef() with the React.useRef hook. The API is almost identical, so the there's not much to it, if you're already familiar with refs.
In React, refs provide a way to store references to native DOM elements. Throughout React's evolution there have been several variations on the pattern including callback refs and string refs. With functional components you'll only want to be using the useRef() hook to create your refs.
One other thing to note about refs is that you can only pass them in to class components and built-in components (such as <div>). If you need to pass a ref into a function components check out the forwardRef API.
Callback Refs
This lesson does not cover callback refs, but if you have one like this one and you wanted to migrate it to useRef()
class MyComponent extends React.Component {
render() {
return (
<input type="text" ref={el => this.inputRef = el} />
)
}
}
It would look like this:
function MyComponent() {
const inputRef = useRef();
return <input type="text" ref={inputRef} />
}
Jamund Ferguson: [0:00] Open up RateTable.js. At the top of the file, import { useRef } from "react". Convert the class component to a function component. Type export function RateTable. Get rid of extends and replace it with the parentheses. Comment out the constructor. Take the render() function and turn it into the function body.
[0:22] In the other methods, such as the bounce() method here, we'll just turn into function declarations. We need to take our props and inline them in our function declaration. Any references that rely on this we'll remove, this.bounce, this.nameRef, and down here, this.nameRef.current.
[0:41] With those changes made, we now see that our app is complaining that nameRef is not defined. Type const nameRef = useRef().
[0:51] The important difference here between useRef and createRef is simply that useRef is a hook and it's used in function components, whereas createRef is used for class components. That's really the only difference.
[1:04] Once you have your ref, such as nameRef here, you can pass it into elements using the ref prop. You can access the current instance with ref.current, as we do here, in our bounce.applyTo() method.
[1:18] The API is exactly the same as it was before, except it's not going to be saved as an instance variable. Instead, it's going to be created with our useRef hook.
[1:26] With that, get rid of the constructor, and you can see our beautiful bounce function still works as it did before.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!