Pitfall

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

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

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

Referência

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.

Parâmetros

createRef não recebe parâmetros.

Retorna

createRef retorna um objeto com uma única propriedade:

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

Ressalvas

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

Uso

Declarando um ref em um componente de classe

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 agora você passar ref={this.inputRef} para um <input> em seu JSX, React preencherá this.inputRef.current com o nó DOM de entrada. Por exemplo, aqui está como você faz um botão que foca na entrada:

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 é usado principalmente para componentes de classe. Componentes de função normalmente dependem de useRef em vez disso.

Alternativas

Migrando de uma classe com createRef para uma função com useRef

Recomendamos o uso de componentes de função em vez de componentes de classe em código novo. 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}>
          Focus the input
        </button>
      </>
    );
  }
}

Quando você converte 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}>
        Focus the input
      </button>
    </>
  );
}
PreviouscreateElement
NextforwardRef