Memanipulasi DOM dengan Refs

Menempatkan Ref ke sebuah node

Untuk mengakses sebuah node DOM yang diatur React, pertama, impor Hook useRef:

import { useRef } from 'react';

Kemudian, deklarasikan ref di dalam komponen Anda:

const myRef = useRef(null);

Terakhir, oper ke DOM node sebagai atribut ref:

<div ref={myRef}>

Hook useRef mengembalikan objek dengan properti tunggal bernama current. Awalnya, myRef.current akan bernilai null. Saat React membuat node DOM untuk <div>, React akan mereferensikan node ini ke dalam myRef.current. Anda bisa mengakses node DOM ini dari event handlers Anda dan menggunakan API peramban bawaan.

// Anda dapat menggunakan API peramban apa saja, sebagai contoh:
myRef.current.scrollIntoView();

Contoh: Fokus ke sebuah input teks

Pada contoh ini, meng-klik tombol tersebut akan fokus ke input:

Penerapannya:

1. Deklarasikan inputRef dengan useRef Hook.
2. Oper sebagai <input ref={inputRef}>. React akan meletakkan <input> DOM node ke dalam inputRef.current.
3. Pada fungsi handleClick, baca input DOM node dari inputRef.current dan panggil focus() menggunakan inputRef.current.focus().
4. Oper handleClick event handler ke <button> menggunakan onClick.

Mesikpun manipulasi DOM merupakan hal yang sangat umum untuk refs, Hook useRef dapat digunakan untuk menyimpan hal-hal lain di luar React, seperti ID timer. Sama halnya dengan state, refs tetap sama di antara proses render. Refs sama seperti variabel state yang tidak memicu banyak render saat Anda mengaturnya. Baca tentang refs pada Mereferensikan nilai dengan Refs.

Contoh: Menggulir ke sebuah Elemen

Anda dapat memiliki lebih dari satu ref dalam sebuah komponen. Pada contoh, terdapat carousel terdiri dari 3 gambar. Setiap tombol mengarahkan ke pusat gambar dengan memanggil metode peramban scrollIntoView() pada node DOM terkait:

<ul>
  {items.map((item) => {
    // Tidak akan berfungsi
    const ref = useRef(null);
    return <li ref={ref} />;
  })}
</ul>

import { useRef } from 'react';

export default function CatFriends() {
  const itemsRef = useRef(null);

  function scrollToId(itemId) {
    const map = getMap();
    const node = map.get(itemId);
    node.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center'
    });
  }

  function getMap() {
    if (!itemsRef.current) {
      // menginisialisasi Map pada pertama kali penggunaan.
      itemsRef.current = new Map();
    }
    return itemsRef.current;
  }

  return (
    <>
      <nav>
        <button onClick={() => scrollToId(0)}>
          Tom
        </button>
        <button onClick={() => scrollToId(5)}>
          Maru
        </button>
        <button onClick={() => scrollToId(9)}>
          Jellylorum
        </button>
      </nav>
      <div>
        <ul>
          {catList.map(cat => (
            <li
              key={cat.id}
              ref={(node) => {
                const map = getMap();
                if (node) {
                  map.set(cat.id, node);
                } else {
                  map.delete(cat.id);
                }
              }}
            >
              <img
                src={cat.imageUrl}
                alt={'Cat #' + cat.id}
              />
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

const catList = [];
for (let i = 0; i < 10; i++) {
  catList.push({
    id: i,
    imageUrl: 'https://placekitten.com/250/200?image=' + i
  });
}

<li
  key={cat.id}
  ref={node => {
    const map = getMap();
    if (node) {
      // Add to the Map
      map.set(cat.id, node);
    } else {
      // Remove from the Map
      map.delete(cat.id);
    }
  }}
>

Mengakses node DOM komponen lain

Saat Anda memasang ref pada komponen bawaan yang mana hasilnya adalah elemen peramban seperti <input />, React akan mengatur properti current ref pada node DOM tersebut (seperti aktual <input /> pada peramban).

Namun, jika Anda mencoba mengatur ref pada komponen Anda sendiri, seperti <MyInput />, secara default Anda akan mendapatkan null. Ini contohnya. Perhatikan bagaimana meng-klik tombol tidak membuat fokus pada input:

Untuk membantu Anda menanggapi issue tersebut, React juga mencetak error pada console:

Ini terjadi karena secara default React tidak mengizinkan komponen mengakses node DOM dari komponen lain. Bahkan children dari komponen tersebut! ini ada alasannya. Refs merupakan jalan darurat yang seharusnya jarang digunakan. Memanipulasi node DOM komponen lain secara manual membuat kode Anda lebih rentan.

Alih-alih, komponen yang ingin mengekspos node DOM harus mengikut perilaku tersebut. Sebuah komponen dapat menentukan untuk meneruskan ref ke salah satu childrennya. Contoh bagaimana MyInput dapat menggunakan API forwardRef:

const MyInput = forwardRef((props, ref) => {
  return <input {...props} ref={ref} />;
});

Ini cara kerjanya:

1. <MyInput ref={inputRef} /> memberitahu React untuk meletakkan node DOM yang sesuai ke dalam inputRef.current. Namun, itu terserah komponen MyInput untuk mengikutinya—secara default, tidak.
2. Komponen MyInput menggunakan forwardRef. Dengan ini komponen menerima inputRef dari atas sebagai argumen ref kedua yang dideklarasikan setelah props.
3. MyInput itu sendiri mengoper ref yang diterima ke dalam <input>.

Sekarang meng-klik tombol untuk fokus ke input berfungsi:

Dalam sistem desain, merupakan pola umum untuk komponen level rendah seperti tombol, input dan sejenisnya untuk meneruskan ref ke node DOM. Sebaliknya, komponen level atas seperti form,list atau seksi halaman biasanya tidak mengekspos node DOM untuk menghindari dependensi yang tidak disengaja pada struktur DOM.

import {
  forwardRef, 
  useRef, 
  useImperativeHandle
} from 'react';

const MyInput = forwardRef((props, ref) => {
  const realInputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    // Only expose focus and nothing else
    focus() {
      realInputRef.current.focus();
    },
  }));
  return <input {...props} ref={realInputRef} />;
});

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

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

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

Ketika React menyematkan Ref

Dalam React, setiap pembaharuan dibagi menjadi dua fase:

• Selama proses render, React memanggil komponen Anda untuk mencari tahu apa yang seharusnya berada di layar.
• Selama proses commit, React menerapkan perubahan pada DOM.

Secara umum, Anda tidak ingin mengakses ref selama proses rendering. Keadaan dimana ref menyimpan node DOM. Selama proses render pertama, node DOM belum dibuat, jadi ref.current bernilai null. Dan selama proses pembaharuan render, node DOM belum diperbarui. Jadi terlalu awal untuk membacanya.

React sets ref.current during the commit. Before updating the DOM, React sets the affected ref.current values to null. After updating the DOM, React immediately sets them to the corresponding DOM nodes.

Usually, you will access refs from event handlers. If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss effects on the next pages.

import { useState, useRef } from 'react';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    setText('');
    setTodos([ ...todos, newTodo]);
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

setTodos([ ...todos, newTodo]);
listRef.current.lastChild.scrollIntoView();

flushSync(() => {
  setTodos([ ...todos, newTodo]);
});
listRef.current.lastChild.scrollIntoView();

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export default function TodoList() {
  const listRef = useRef(null);
  const [text, setText] = useState('');
  const [todos, setTodos] = useState(
    initialTodos
  );

  function handleAdd() {
    const newTodo = { id: nextId++, text: text };
    flushSync(() => {
      setText('');
      setTodos([ ...todos, newTodo]);      
    });
    listRef.current.lastChild.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest'
    });
  }

  return (
    <>
      <button onClick={handleAdd}>
        Add
      </button>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <ul ref={listRef}>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </>
  );
}

let nextId = 0;
let initialTodos = [];
for (let i = 0; i < 20; i++) {
  initialTodos.push({
    id: nextId++,
    text: 'Todo #' + (i + 1)
  });
}

Best practices for DOM manipulation with refs

Refs are an escape hatch. You should only use them when you have to “step outside React”. Common examples of this include managing focus, scroll position, or calling browser APIs that React does not expose.

If you stick to non-destructive actions like focusing and scrolling, you shouldn’t encounter any problems. However, if you try to modify the DOM manually, you can risk conflicting with the changes React is making.

To illustrate this problem, this example includes a welcome message and two buttons. The first button toggles its presence using conditional rendering and state, as you would usually do in React. The second button uses the remove() DOM API to forcefully remove it from the DOM outside of React’s control.

Try pressing “Toggle with setState” a few times. The message should disappear and appear again. Then press “Remove from the DOM”. This will forcefully remove it. Finally, press “Toggle with setState”:

After you’ve manually removed the DOM element, trying to use setState to show it again will lead to a crash. This is because you’ve changed the DOM, and React doesn’t know how to continue managing it correctly.

Avoid changing DOM nodes managed by React. Modifying, adding children to, or removing children from elements that are managed by React can lead to inconsistent visual results or crashes like above.

However, this doesn’t mean that you can’t do it at all. It requires caution. You can safely modify parts of the DOM that React has no reason to update. For example, if some <div> is always empty in the JSX, React won’t have a reason to touch its children list. Therefore, it is safe to manually add or remove elements there.