Ref Functions
React allows you to grab the instance of an element or component with refs.
Refs in Functional Components
Inside a functional component, refs are accessed with the useRef
hook:
1import {useRef} from 'react';2import * as React from 'react';3
4function MyComponent() {5 const buttonRef = useRef<null | HTMLButtonElement>(null); 6 buttonRef as {current: null | HTMLButtonElement}; // useRef wraps the ref value in an object7 return <button ref={buttonRef}>Toggle</button>;8}
5:21-5:58: Cannot call hook [1] because React hooks can only be called within components or hooks. [react-rule-hook]
Note that useRef
wraps the ref value in an object with a current
property. This must be
reflected in the type of anything accepting the ref value.
Refs in Class Components
Refs in class components are similar to function components. To create one, add a
property to your class and assign the result of React.createRef
to it.
1import * as React from 'react';2
3class MyComponent extends React.Component<{}> {4 // The `null` here is important because you may not always have the instance.5 buttonRef: {current: null | HTMLButtonElement};6
7 constructor() {8 super(); 9 this.buttonRef = React.createRef<HTMLButtonElement>();10 }11
12 render(): React.Node {13 return <button ref={this.buttonRef}>Toggle</button>;14 }15}
8:5-8:9: Cannot call `super` because function [1] requires another argument. [incompatible-call]
One notable difference between useRef
and createRef
is that createRef
does not accept
a default value. It will initialize the ref with the value null
. This is because
DOM elements will not exist until the first render of MyComponent
and so a null
value
must be used.
Again, note that the ref value is wrapped in an object with a current
property.