createRef.md

title
createRef

createRef se usa principalmente para componentes de clase. Los componentes de función generalmente usan useRef en su lugar.

createRef crea un objeto ref que puede contener un valor arbitrario.

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

---

Referencia {/reference/}

createRef() {/createref/}

Invoca a createRef para declarar una ref dentro de un componente de clase.

import { createRef, Component } from 'react';

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

Ver más ejemplos debajo.

Parámetros {/parameters/}

createRef no recibe parámetros.

Retorno {/returns/}

createRef retorna un objeto con una única propiedad:

• current: Inicialmente, se establece en null. Posteriormente, se puede establecer en cualquier otra cosa. Si pasas el objeto ref a React como un atributo ref de un nodo JSX, React establecerá su propiedad current.

Advertencias {/caveats/}

• createRef siempre devuelve un objeto diferente. Es equivalente a escribir { current: null } manualmente.
• En un componente de función, probablemente querrás usar useRef en su lugar, que siempre devuelve el mismo objeto.
• const ref = useRef() es equivalente a const [ref, _] = useState(() => createRef(null)).

---

Uso {/usage/}

Declarar una referencia en un componente de clase {/declaring-a-ref-in-a-class-component/}

Para declarar una referencia (ref) dentro de un componente de clase, invoca a createRef y asigna el resultado a un campo de clase:

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

Si ahora pasas ref={this.inputRef} a un <input> en tu JSX, React llenará this.inputRef.current con el nodo del DOM del input. Por ejemplo, así es como puedes crear un botón que enfoca el 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}>
          Enfoca el input
        </button>
      </>
    );
  }
}

createRef se usa principalmente para componentes de clase. Los componentes de función generalmente dependen de useRef en su lugar.

---

Alternativas {/alternatives/}

Migrando de una clase con createRef a una función con useRef {/migrating-from-a-class-with-createref-to-a-function-with-useref/}

Recomendamos utilizar componentes de función en lugar de componentes de clase en código nuevo. Si tienes componentes de clase existentes que utilizan createRef, así es cómo puedes convertirlos. Este es el 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}>
          Enfoca el input
        </button>
      </>
    );
  }
}

Cuando convierta este componente de clase a función, reemplace las invocaciones de createRef con 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}>
        Enfoca el input
      </button>
    </>
  );
}