createRefLink for this heading

January 6, 2025 · View on GitHub

Pitfall

createRef is mostly used for class components. Function components typically rely on useRef instead.

createRef creates a ref object which can contain arbitrary value.

class MyInput extends Component {

  inputRef = createRef();

  // ...

}

Reference
- createRef()
Usage
- Declaring a ref in a class component
Alternatives
- Migrating from a class with createRef to a function with useRef

Reference Link for Reference

`createRef()`Link for this heading

Call createRef to declare a ref inside a class component.

import { createRef, Component } from 'react';

class MyComponent extends Component {

  intervalRef = createRef();

  inputRef = createRef();

  // ...

See more examples below.

Parameters Link for Parameters

createRef takes no parameters.

Returns Link for Returns

createRef returns an object with a single property:

current: Initially, it’s set to the null. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property.

Caveats Link for Caveats

createRef always returns a different object. It’s equivalent to writing { current: null } yourself.
In a function component, you probably want useRef instead which always returns the same object.
const ref = useRef() is equivalent to const [ref, _] = useState(() => createRef(null)).

Usage Link for Usage

Declaring a ref in a class component Link for Declaring a ref in a class component

To declare a ref inside a class component, call createRef and assign its result to a class field:

import { Component, createRef } from 'react';

class Form extends Component {

  inputRef = createRef();

  // ...

}

If you now pass ref={this.inputRef} to an <input> in your JSX, React will populate this.inputRef.current with the input DOM node. For example, here is how you make a button that focuses the input:

App.js

ResetFork

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

Pitfall

createRef is mostly used for class components. Function components typically rely on useRef instead.

Alternatives Link for Alternatives

Migrating from a class with `createRef` to a function with `useRef`Link for this heading

We recommend using function components instead of class components in new code. If you have some existing class components using createRef, here is how you can convert them. This is the original code:

App.js

ResetFork

import { Component, createRef } from 'react';

export default class Form extends Component {
  inputRef = createRef();

  handleClick = () => {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>
          Focus the input
        </button>
      </>
    );
  }
}

When you convert this component from a class to a function, replace calls to createRef with calls to useRef:

App.js

ResetFork

import { useRef } from 'react';

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}