Sign in Subscribe
ReactJs

Rendering Elements di React dengan Cara Efisien

Rendering Elements di React dengan Cara Efisien
Photo by Tudor Baciu / Unsplash

Dalam React, rendering elements adalah proses menampilkan elemen UI ke dalam halaman web. Berbeda dengan manipulasi DOM secara langsung seperti di JavaScript murni, React menggunakan Virtual DOM untuk memastikan rendering berjalan lebih efisien dan cepat.

Pada artikel ini, kita akan membahas bagaimana cara rendering elemen di React dengan optimal, termasuk bagaimana React memperbarui elemen secara efisien dan menghindari render yang tidak perlu.

1. Apa Itu Rendering di React?

Rendering di React adalah proses di mana komponen dan elemen ditampilkan dalam DOM. React menggunakan ReactDOM.render() untuk memasukkan elemen ke dalam halaman.

Contoh sederhana rendering elemen ke dalam root HTML:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

Kode ini akan menampilkan teks Hello, React! dalam elemen HTML dengan ID root.

2. Cara Rendering Elemen di React

📌 A. Rendering Elemen Sederhana

React dapat merender elemen seperti tag HTML biasa.

const element = <h1>Selamat Datang di React</h1>;

Elemen ini bisa langsung dimasukkan ke dalam ReactDOM.render().

📌 B. Rendering dengan Variabel JavaScript

Kita bisa menyimpan elemen dalam variabel dan merendernya:

const name = 'React Developer';
const element = <h1>Hello, {name}!</h1>;

React akan menggantikan {name} dengan React Developer secara otomatis.

📌 C. Rendering dengan Function Component

Daripada hanya menggunakan elemen biasa, kita bisa menggunakan komponen berbasis fungsi.

function Greeting() {
  return <h1>Hello, Selamat Belajar React!</h1>;
}
ReactDOM.render(<Greeting />, document.getElementById('root'));

3. Bagaimana React Melakukan Rendering dengan Virtual DOM?

React menggunakan Virtual DOM untuk mengoptimalkan rendering dan menghindari perubahan yang tidak perlu pada DOM asli.

📌 Cara Kerja Virtual DOM

1️⃣ React membuat salinan Virtual DOM dari elemen yang ada.
2️⃣ React membandingkan Virtual DOM lama dan baru (menggunakan Diffing Algorithm).
3️⃣ Hanya elemen yang berubah yang diperbarui ke DOM asli (Reconciliation).

Dengan cara ini, React lebih cepat dibanding manipulasi DOM secara langsung seperti di jQuery atau JavaScript Vanilla.

4. Cara Efisien dalam Rendering Elemen React

📌 A. Hindari Render yang Tidak Perlu

Gunakan shouldComponentUpdate() atau React.memo() untuk mencegah render yang tidak diperlukan pada komponen tertentu.

import React from 'react';
const MyComponent = React.memo(({ name }) => {
  console.log('Komponen dirender ulang');
  return <h1>Hello, {name}</h1>;
});

React.memo() akan mencegah komponen di-render ulang jika props tidak berubah.

📌 B. Gunakan Key Saat Rendering List

Jika merender daftar elemen, gunakan key agar React bisa mengidentifikasi perubahan dengan lebih cepat.

const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);

Tanpa key, React harus merender ulang seluruh daftar setiap kali ada perubahan.

📌 C. Gunakan Fragment untuk Menghindari Node Tambahan

React biasanya membutuhkan satu elemen pembungkus, tetapi kita bisa menggunakan React.Fragment untuk menghindari node ekstra di DOM.

import React from 'react';
function MyComponent() {
  return (
    <>
      <h1>Judul</h1>
      <p>Deskripsi singkat.</p>
    </>
  );
}

Dengan Fragment (<> </>), kita bisa menghindari tambahan <div> yang tidak perlu di DOM.

5. Kapan Harus Memikirkan Optimalisasi Rendering?

✅ Perlu optimasi rendering jika:

  • Aplikasi memiliki banyak komponen yang sering berubah.
  • Ada komponen yang kompleks dan membutuhkan banyak update state.
  • Menggunakan list dengan banyak elemen.

❌ Tidak perlu optimasi jika:

  • Aplikasi masih kecil dan performa belum menjadi masalah.
  • Komponen hanya dirender sekali atau sangat jarang diperbarui.

6. Kesimpulan

  • React merender elemen ke dalam DOM dengan cara yang lebih efisien menggunakan Virtual DOM.
  • Gunakan React.memo(), Fragment, dan Key saat merender daftar elemen untuk mengoptimalkan performa.
  • Hindari render ulang yang tidak perlu dengan memahami bagaimana state dan props bekerja dalam React.
  • Dengan memahami konsep rendering React, kita bisa membangun aplikasi yang lebih cepat dan responsif.

Sekarang, kamu sudah paham cara rendering elemen di React dengan cara yang lebih efisien!

Read next