Pitfall

createRef kebanyakan digunakan untuk komponen kelas. sedangkan komponen fungsional biasanya mengandalkan useRef.

createRef membuat sebuah objek ref yang menyimpan nilai apapun.

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

Referensi

createRef()

Panggil createRef untuk mendeklarasikan sebuah ref di dalam sebuah komponen kelas.

import { createRef, Component } from 'react';

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

Lihat contoh lebih banyak di bawah.

Parameter

createRef tidak memerlukan parameter.

Balikan

createRef mengembalikan sebuah objek dengan properti tunggal:

  • current: Awalnya, bernilai null. Anda dapat menggantinya dengan nilai lain kemudian. Jika Anda mengoper objek ref ke React sebagai sebuah atribut ref di dalam simpul JSX, React akan menetapkannya sebagai properti current.

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

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:

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

Migrating from a class with createRef to a function with useRef

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:

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:

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>
    </>
  );
}
PreviouscreateFactoryNextisValidElement

How do you like these docs?