Pitfall

createRef é usado principalmente para componentes de classe. Componentes de função normalmente dependem de useRef.

createRef cria um objeto ref que pode conter um valor arbitrário.

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

Reference

createRef()

Chame createRef para declarar um ref dentro de um componente de classe.

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

Veja mais exemplos abaixo.

Parameters

createRef não aceita parâmetros.

Returns

createRef retorna um objeto com uma única propriedade:

  • current: Inicialmente, é definido como null. Você pode alterá-lo posteriormente. Se você passar o objeto ref para o React como um atributo ref para um nó JSX, o React definirá sua propriedade current.

Caveats

  • createRef sempre retorna um objeto diferente. É equivalente a escrever { current: null } você mesmo.
  • Em um componente de função, você provavelmente deseja useRef em vez, que sempre retorna o mesmo objeto.
  • const ref = useRef() é equivalente a const [ref, _] = useState(() => createRef(null)).

Usage

Declaring a ref in a class component

Para declarar um ref dentro de um componente de classe, chame createRef e atribua seu resultado a um campo de classe:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Se você agora passar ref={this.inputRef} para um <input> em seu JSX, o React preencherá this.inputRef.current com o nó do DOM de entrada. Por exemplo, aqui está como você cria um botão que foca o input:

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}>
          Focar o input
        </button>
      </>
    );
  }
}

Pitfall

createRef é usado principalmente para componentes de classe. Componentes de função normalmente dependem de useRef.

Alternatives

Migrating from a class with createRef to a function with useRef

Recomendamos o uso de componentes de função em vez de componentes de classe em códigos novos. Se você tiver alguns componentes de classe existentes usando createRef, aqui está como você pode convertê-los. Este é o código original:

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}>
          Focar o input
        </button>
      </>
    );
  }
}

Quando você converter este componente de uma classe para uma função, substitua as chamadas para createRef por chamadas para useRef:

import { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>
        Focar o input
      </button>
    </>
  );
}
PreviouscreateFactory
NextisValidElement