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 object
                                                 7  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. Under the current configuration, we only infer component-syntax components to be components and hook-syntax hooks to be hooks. (https://react.dev/reference/rules/rules-of-hooks) [react-rule-hook]
5:35-5:51: Cannot resolve name `HTMLButtonElement`. [cannot-resolve-name]
6:33-6:49: Cannot resolve name `HTMLButtonElement`. [cannot-resolve-name]

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}

5:31-5:47: Cannot resolve name `HTMLButtonElement`. [cannot-resolve-name]
8:5-8:9: Cannot call `super` because function [1] requires another argument. [incompatible-call]
9:38-9:54: Cannot resolve name `HTMLButtonElement`. [cannot-resolve-name]

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.