react manajemen state

📚 Seri Belajar React Artikel 13 dari 16

Manajemen State Skala Besar:
Praktikum Zustand atau Redux Toolkit di React

Bingung pilih Zustand atau Redux Toolkit buat React kamu? Artikel ini jawab semua pertanyaan itu dengan praktek langsung — no drama, no ribet.

Zustand Redux Toolkit React State Management Global State

⏱️ Estimasi baca: 12 menit

🎯 Level: Pemula–Menengah

📅 2026

Pernah nggak kamu merasa bahwa useState yang kamu punya mulai terasa kayak kulkas penuh — susah nyari isinya dan berantakan? Itulah momen ketika kamu butuh React state management yang lebih serius. Di artikel ke-13 dari Seri Belajar React: React from Zero to Zorro ini, kita bakal ngebahas dua solusi paling populer: Zustand dan Redux Toolkit. Dua tools yang sering bikin developer pemula bingung pilih yang mana. Spoiler: keduanya keren — tinggal tahu kapan pakai yang mana.

💎 Konsep Inti: Global State

Global State adalah data yang perlu diakses oleh banyak komponen di berbagai level hierarki tanpa harus di-prop-drill satu per satu. Bayangkan seperti papan pengumuman kantor — semua orang bisa lihat dan update tanpa harus bisik-bisik ke setiap meja. Zustand dan Redux Toolkit adalah dua cara paling modern untuk mengelola papan pengumuman itu di React.

Kenapa useState Saja Tidak Cukup untuk Aplikasi Besar?

Coba bayangkan kamu lagi bangun aplikasi e-commerce. Ada komponen Navbar yang butuh tahu berapa item di cart. Ada komponen ProductCard yang bisa tambah item. Dan ada CheckoutPage yang butuh detail semua item. Kalau pakai useState biasa, kamu harus prop-drill data cart dari parent ke child ke grandchild — ini yang disebut "prop drilling hell".

🔥

Fakta Menarik

Survei State of React 2024 menunjukkan bahwa Redux Toolkit masih menjadi state management library paling banyak digunakan, sementara Zustand adalah yang paling cepat pertumbuhannya — naik 40% dalam satu tahun terakhir!

Solusinya adalah menaruh state di tempat yang bisa diakses dari mana saja — itulah peran Zustand Redux Toolkit React state management. Keduanya punya pendekatan yang berbeda, tapi tujuannya sama: bikin kode kamu bersih, scalable, dan mudah di-debug.

Zustand: State Management yang Minimalis dan Powerful

Zustand (bahasa Jerman untuk "state") adalah library state management yang sangat ringan. Kalau Redux adalah kantor besar dengan SOP ketat dan banyak departemen, Zustand itu seperti Google Keep — simpel, langsung kerja, no nonsense.

💡

Tips Pemula

Kalau aplikasi kamu masih relatif kecil-menengah (misalnya portfolio, todo app kompleks, atau blog dengan fitur autentikasi), Zustand adalah pilihan terbaik. Boilerplate-nya minimal dan kamu bisa langsung produktif dalam 15 menit.

🚀 Cara Pakai Zustand: Step by Step

1

Install Zustand

# npm
npm install zustand

# atau yarn
yarn add zustand

2

Buat Store dengan create()

// store/useCartStore.js
import { create } from 'zustand';

const useCartStore = create((set) => ({
  items: [],
  totalItems: 0,
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],
      totalItems: state.totalItems + 1,
    })),
  removeItem: (id) =>
    set((state) => ({
      items: state.items.filter((i) => i.id !== id),
      totalItems: state.totalItems - 1,
    })),
}));

export default useCartStore;

3

Gunakan Store di Komponen Mana Saja

// components/Navbar.jsx
import useCartStore from '../store/useCartStore';

function Navbar() {
  const totalItems = useCartStore((state) => state.totalItems);

  return (
    <nav>
      <span>🛒 Cart: {totalItems}</span>
    </nav>
  );
}

✨ Nggak perlu Provider! Nggak perlu useSelector yang panjang! Langsung panggil, langsung jalan.

Redux Toolkit: Solusi Enterprise untuk React State Management Skala Besar

Redux Toolkit (RTK) adalah cara resmi dan modern untuk pakai Redux — tanpa boilerplate yang nyebelin dari Redux versi lama. Kalau Zustand itu startup yang agile, Redux Toolkit itu perusahaan Fortune 500 yang punya prosedur jelas, tim besar, dan sistem audit yang ketat.

⚡

Insight Penting

Redux Toolkit hadir dengan RTK Query — sebuah fitur bawaan untuk data fetching dan caching yang powerful. Ini berarti kamu bisa handle API calls, loading states, dan caching dalam satu ekosistem yang terintegrasi. Sangat berguna untuk aplikasi enterprise yang kompleks!

⚙️ Cara Pakai Redux Toolkit: Step by Step

1

Install Redux Toolkit dan React-Redux

npm install @reduxjs/toolkit react-redux

2

Buat Slice dengan createSlice()

// store/cartSlice.js
import { createSlice } from '@reduxjs/toolkit';

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [], totalItems: 0 },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
      state.totalItems += 1;
    },
    removeItem: (state, action) => {
      state.items = state.items.filter(
        (i) => i.id !== action.payload
      );
      state.totalItems -= 1;
    },
  },
});

export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;

3

Buat Store dan Wrap App dengan Provider

// store/store.js
import { configureStore } from '@reduxjs/toolkit';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: { cart: cartReducer },
});

// main.jsx
import { Provider } from 'react-redux';
import { store } from './store/store';

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

4

Gunakan di Komponen dengan useSelector dan useDispatch

import { useSelector, useDispatch } from 'react-redux';
import { addItem } from '../store/cartSlice';

function ProductCard({ product }) {
  const dispatch = useDispatch();
  const totalItems = useSelector(
    (state) => state.cart.totalItems
  );

  return (
    <button onClick={() => dispatch(addItem(product))}>
      Tambah ke Cart ({totalItems})
    </button>
  );
}

Zustand vs Redux Toolkit: Pilih yang Mana untuk Proyekmu?

Pertanyaan sejuta dolar! Keduanya adalah tools yang excellent untuk React state management, tapi punya karakteristik yang berbeda. Mari kita bedah secara jujur:

🔬 Analisis Mendalam: Kapan Pakai Apa?

Aspek	⚡ Zustand	🏗️ Redux Toolkit
Ukuran Bundle	~3KB ✅	~50KB ⚠️
Boilerplate Code	Minimal ✅	Sedang ⚠️
Kurva Belajar	Sangat Mudah ✅	Sedang–Tinggi ❗
DevTools Support	Terbatas ⚠️	Excellent ✅
Data Fetching	Manual ❗	RTK Query ✅
Cocok untuk	Proyek kecil–menengah, MVP, startup	Aplikasi enterprise, tim besar
TypeScript Support	Baik ✅	Excellent ✅

⚠️

Perhatian untuk Pemula!

Jangan langsung lompat ke Redux Toolkit hanya karena dengar "itu yang dipakai di perusahaan besar." Kalau kamu masih belajar React, mulai dari Zustand. Pahami konsep global state dulu, baru upgrade ke RTK kalau memang dibutuhkan. Belajar yang benar itu bertahap — bukan langsung sprint 100 meter.

⚡

Pro Tip: Bisa Kombinasi!

Beberapa developer pro menggunakan Zustand untuk UI state (sidebar open/close, modal, theme) dan RTK Query untuk server state (data dari API). Tidak ada aturan kaku — yang penting konsisten dalam satu proyek!

🎯 Kesimpulan

Baik Zustand maupun Redux Toolkit adalah solusi React state management yang solid. Zustand cocok untuk kamu yang ingin solusi cepat, ringan, dan simpel — ideal untuk pemula dan proyek menengah. Redux Toolkit adalah pilihan tepat ketika aplikasimu tumbuh besar, butuh DevTools yang powerful, dan tim yang lebih dari satu orang. Kuncinya: jangan takut untuk mulai dari Zustand, dan upgrade ke RTK ketika kamu sudah merasakan kebutuhannya.

✅ Zustand = Simpel & Cepat ✅ Redux Toolkit = Scalable & Powerful ✅ Bisa Kombinasi Keduanya

Sudah coba Zustand atau Redux Toolkit di proyekmu? Share pengalamanmu di kolom komentar! Dan kalau artikel ini membantu, jangan pelit untuk share ke teman-teman sesama React learner ya 🚀

📚 Lihat Semua Seri Artikel

Tags Artikel

#BelajarReact #ZeroToZorro #Zustand #ReduxToolkit #StateManagement #ReactJS #GlobalState #FrontendDev

📖

Seri Belajar React: React from Zero to Zorro

Kamu sedang membaca artikel ke-13 dari 16

Seri lengkap belajar React dari nol sampai mahir — mulai dari dasar JSX, Hooks, hingga state management skala besar dan deployment. Cocok untuk pemula yang ingin jalur belajar yang terstruktur.

🗂️ Lihat Daftar Isi Lengkap →

← Artikel Sebelumnya

Custom Hook: Bikin Sendiri Hook-mu Biar Kode Lebih Rapi dan Reusable

Artikel 12

Artikel Selanjutnya →

Styling Profesional di React: Praktikum Tailwind CSS dan CSS Modules

Artikel 14

react custom hook

📚 Seri Belajar React · Artikel 12 dari 16

Custom Hook: Bikin Sendiri Hook-mu
Biar Kode Lebih Rapi & Reusable

Udah capek copy-paste logika yang sama ke banyak komponen? Saatnya kamu kenalan sama custom hook React — senjata rahasia developer senior buat kode yang lebih bersih dan reusable.

#CustomHook #ReusableLogic #ReactHooks #BelajarReact #ZeroToZorro

⏱️

Estimasi Baca

9 Menit

🎯

Level

Pemula → Menengah

📅

Tahun

2026

Pernah nggak kamu nulis logika useState + useEffect untuk fetch data, terus kamu nulis hal yang sama persis di komponen lain? Rasanya kayak déjà vu yang menyebalkan — copy, paste, ganti nama variabel, selesai. Padahal ada cara yang jauh lebih elegan: custom hook React reusable logic. Dengan custom hook, logika yang sering kamu pakai bisa dikemas jadi satu fungsi yang bisa dipanggil di mana saja. Artikel ini adalah bagian dari Seri Belajar React: React From Zero to Zorro, dan di sini kamu akan belajar cara membuat custom hook dari nol sampai siap dipakai di proyek nyata.

Apa Itu Custom Hook dan Kenapa Kamu Butuh custom hook React?

Bayangkan kamu punya pisau Swiss Army — satu alat yang punya banyak fungsi. Custom hook itu persis kayak gitu: satu fungsi yang membungkus logika React (state, effect, ref, dll.) supaya bisa dipakai ulang di banyak komponen tanpa harus ditulis berulang.

Secara teknis, custom hook adalah fungsi JavaScript biasa yang namanya diawali dengan kata use — misalnya useFetch, useWindowSize, atau useLocalStorage. Di dalamnya, kamu bebas pakai hook bawaan React seperti useState dan useEffect.

⚙️

📐 Definisi Kunci

Custom Hook adalah fungsi JavaScript yang diawali use, berisi logika stateful React, dan dapat digunakan kembali di berbagai komponen tanpa mengulang kode. Ini adalah implementasi prinsip DRY (Don't Repeat Yourself) yang paling elegan di ekosistem React.

🔥

Fakta Menarik

Library React populer seperti react-use dan ahooks sepenuhnya dibuat dari custom hook. Artinya, skill yang kamu pelajari hari ini adalah fondasi dari ribuan library open-source di luar sana!

Cara Membuat Custom Hook React Reusable Logic dari Nol

Oke, teori cukup. Sekarang kita langsung hands-on. Kita akan bikin dua custom hook yang sering banget dibutuhkan di proyek nyata: useFetch untuk fetching data, dan useLocalStorage untuk menyimpan data ke browser storage. Ikuti langkah-langkahnya!

1

Identifikasi logika yang berulang

Perhatikan komponen-komponen di proyekmu. Kalau kamu melihat pola yang sama muncul lebih dari sekali, itu sinyal kuat bahwa saatnya bikin custom hook. Contohnya: logika fetch API yang muncul di UserList, ProductList, dan OrderList.

2

Buat file baru dengan nama diawali use

Konvensinya, simpan custom hook di folder src/hooks/. Buat file bernama useFetch.js.

3

Tulis logika hook-mu

Pindahkan logika berulang tadi ke dalam fungsi custom hook. Berikut implementasi useFetch yang siap pakai:

📄 src/hooks/useFetch.js custom hook · reusable

import { useState, useEffect } from 'react';

// ✨ Custom Hook: useFetch
function useFetch(url) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);

  useEffect(() => {
    // Reset state setiap URL berubah
    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

4

Gunakan hook-mu di komponen

Sekarang komponen jadi super bersih! Cukup satu baris untuk dapetin semua state yang dibutuhkan:

📄 UserList.jsx menggunakan useFetch

import useFetch from '../hooks/useFetch';

function UserList() {
  const { data, loading, error } = useFetch(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (loading) return <p>Memuat data...</p>;
  if (error)   return <p>Error: {error}</p>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

💡

Tips Praktis

Awali nama custom hook dengan use bukan hanya konvensi, tapi aturan wajib. React menggunakan prefix ini untuk menjamin aturan hooks dipatuhi (misalnya, tidak dipanggil di luar komponen atau hook lain).

Contoh Custom Hook React Reusable Logic: useLocalStorage

Satu lagi contoh custom hook yang sangat berguna di kehidupan nyata — menyimpan dan membaca data dari localStorage. Tanpa custom hook, kamu harus tulis JSON.parse dan JSON.stringify terus-terusan. Ngebosenin? Banget. Sekarang kita bungkus jadi hook sekali, pakai selamanya.

📄 src/hooks/useLocalStorage.js persistent state

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Kalau error, pakai nilai awal
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

Dan cara pakainya? Persis seperti useState biasa — hanya tinggal tambahkan nama key-nya:

📄 ThemeToggle.jsx

import useLocalStorage from '../hooks/useLocalStorage';

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Mode sekarang: {theme} 🌓
    </button>
  );
}
// Theme akan tersimpan walau browser di-refresh! ✨

⚡

Insight Penting

Custom hook tidak berbagi state antar komponen yang menggunakannya. Setiap komponen yang memanggil useFetch mendapatkan state-nya sendiri yang independen. Ini beda dengan Context API atau state management global.

Aturan Emas dan Best Practice Custom Hook React

🔍 Perbandingan: Dengan vs Tanpa Custom Hook

❌ Tanpa Custom Hook

• Logika duplikat di banyak komponen
• Susah di-test secara terpisah
• Kode sulit dibaca & maintain
• Bug harus diperbaiki di banyak tempat

✅ Dengan Custom Hook

• Satu definisi, dipakai di mana saja
• Mudah di-unit test secara terisolasi
• Komponen jadi fokus ke tampilan saja
• Bug cukup diperbaiki di satu tempat

Custom Hook	Kegunaan	Kompleksitas
useFetch	Fetching data dari API	Mudah
useLocalStorage	State yang persist di browser	Mudah
useWindowSize	Deteksi ukuran layar real-time	Menengah
useDebounce	Delay eksekusi (misal: search)	Menengah
useAuth	Manajemen sesi autentikasi	Lanjutan

⚠️

Perhatian!

Custom hook tetap harus mengikuti Rules of Hooks: hanya boleh dipanggil di level teratas fungsi komponen atau hook lain — jangan dipanggil di dalam kondisi (if), loop (for), atau nested function.

💡

Tips: Struktur Folder yang Rapi

Simpan semua custom hook di src/hooks/ dan ekspor dari satu file index.js supaya impor lebih bersih:

import { useFetch, useLocalStorage } from '../hooks';

📚

Bagian dari

Seri Belajar React: React From Zero to Zorro

Artikel ini adalah bagian ke-12 dari 16 artikel dalam seri lengkap belajar React dari nol. Akses daftar isi lengkap dan semua artikel di sini:

🗺️ Lihat Daftar Isi Lengkap Seri

🎯 Kesimpulan

Custom Hook: Satu Kali Tulis, Selamanya Pakai

Hari ini kamu sudah belajar bahwa custom hook React reusable logic bukan sekadar fitur keren — ini adalah cara berpikir yang akan mengubah cara kamu menulis React selamanya. Rangkuman poin utamanya:

• Custom hook adalah fungsi JS biasa berawalan use yang bungkus logika React
• Cocok untuk logika yang muncul berulang di banyak komponen
• Setiap komponen yang pakai hook mendapat state-nya sendiri yang independen
• Simpan di src/hooks/ dan ekspor dari index.js
• Tetap patuhi Rules of Hooks — jangan panggil di dalam kondisi atau loop

Bagaimana pengalamanmu pertama kali bikin custom hook? Kamu bikin hook untuk apa? Ceritakan di kolom komentar di bawah — dan kalau artikel ini bermanfaat, share ke teman-temanmu yang lagi belajar React ya! 🚀

📚 Lihat Seri Lengkap 💬 Tulis Komentar

🏷️ Topik Artikel

#BelajarReact #ZeroToZorro #CustomHook #ReusableLogic #ReactHooks #useFetch #useLocalStorage #JavaScript

📖 Navigasi Seri

← Artikel Sebelumnya

React Makin Cepat: Optimasi Performa dengan useMemo, useCallback, dan React.memo

← Baca Artikel

Artikel Selanjutnya →

Manajemen State Skala Besar: Praktikum Zustand atau Redux Toolkit di React

Baca Artikel →

react optimasi performa

⚛️ React 🚀 Performance 📘 Artikel 11 dari 16

React Makin Cepat: Optimasi Performa dengan useMemo, useCallback, dan React.memo

Pelajari cara optimasi performa React menggunakan useMemo, useCallback, dan React.memo — tiga senjata ampuh yang bikin aplikasimu secepat kilat ⚡

⏱ 12

Menit Baca

🎯

Level Pemula

2026

Updated

Pernah nggak, kamu bikin aplikasi React yang udah keren banget secara tampilan — tapi pas dipakai, terasa lemot kayak internet warnet tahun 2005? 😅 Setiap kali user klik tombol atau isi form, komponen lain ikut-ikutan re-render padahal nggak ada hubungannya. Masalah ini bukan soal skill atau kurang bakat — ini soal optimasi performa React yang memang jarang diajarkan untuk pemula.

Di artikel ke-11 dari Seri Belajar React: React from Zero to Zorro ini, kita bakal bedah tiga hook dan utility bawaan React yang bisa bikin aplikasimu jauh lebih efisien: useMemo, useCallback, dan React.memo. Ketiganya adalah alat yang dipakai developer senior untuk mengontrol kapan sebuah komponen atau nilai perlu dihitung ulang — dan kapan tidak.

📌 Konsep Utama

Re-render adalah proses React menggambar ulang komponen. Ini normal — tapi kalau terjadi terlalu sering dan tidak perlu, performa aplikasimu akan menurun drastis. useMemo, useCallback, dan React.memo adalah mekanisme untuk mencegah re-render yang tidak diperlukan dengan cara memoization — menyimpan hasil perhitungan agar tidak dihitung ulang setiap saat.

🧠 Kenapa Aplikasi React Bisa Jadi Lambat?

Bayangkan kamu punya toko kue. Setiap kali ada pelanggan baru masuk, kamu menghitung ulang semua stok dari awal, padahal stoknya belum berubah. Capek kan? Nah, React tanpa optimasi bekerja mirip seperti itu.

Secara default, setiap kali state atau props berubah pada sebuah komponen induk, semua komponen anak akan ikut di-render ulang — meskipun data yang mereka butuhkan tidak berubah sama sekali. Inilah yang disebut unnecessary re-render, dan ini adalah biang keladi utama aplikasi React yang terasa berat.

🔥 Fakta Menarik

Menurut riset Google, penundaan loading 100ms saja bisa menurunkan konversi hingga 7%. Di dunia web modern, performa bukan sekadar teknis — itu adalah bagian dari pengalaman pengguna yang langsung berdampak ke bisnis.

Masalah ini makin terasa ketika aplikasimu punya daftar panjang, perhitungan berat, atau banyak komponen bersarang. Di sinilah tiga alat kita berperan.

Alat	Digunakan Untuk	Input yang Diingat	Output
useMemo	Menyimpan hasil perhitungan	Dependencies	Nilai (value)
useCallback	Menyimpan referensi fungsi	Dependencies	Fungsi (function)
React.memo	Mencegah re-render komponen	Props	Komponen (component)

⚙️ Cara Kerja dan Contoh Praktis useMemo, useCallback & React.memo

Mari kita bahas satu per satu dengan contoh yang bisa langsung kamu praktikkan. Ingat, pemahaman terbaik datang dari menulis kode sendiri — bukan hanya membacanya!

1

useMemo — Simpan Hasil Perhitungan Berat

Anggap useMemo seperti catatan di buku tulis. Daripada menghitung ulang nilai yang sama setiap kali render, React menyimpan hasilnya dan hanya menghitung ulang jika dependensinya berubah.

Kapan dipakai? Ketika kamu punya fungsi yang hasilnya membutuhkan komputasi berat — seperti memfilter array ribuan item, menghitung total harga, dsb.

import React, { useState, useMemo } from 'react';

function ProductList({ products }) {
  const [search, setSearch] = useState('');

  // ✅ useMemo: filter hanya dihitung ulang jika 'search' atau 'products' berubah
  const filteredProducts = useMemo(() => {
    return products.filter(p =>
      p.name.toLowerCase().includes(search.toLowerCase())
    );
  }, [products, search]); // ← dependency array

  return (
    <div>
      <input value={search} onChange={e => setSearch(e.target.value)} />
      <ul>{filteredProducts.map(p => <li key={p.id}>{p.name}</li>)}</ul>
    </div>
  );
}

💡 Tips: Dependency Array itu Wajib!

Dependency array (argumen kedua) memberitahu React kapan nilai harus dihitung ulang. Jika kosong [], nilai hanya dihitung sekali. Jika kamu lupa mengisinya dengan benar, kamu bisa mendapat bug yang susah di-debug. Gunakan plugin ESLint exhaustive-deps untuk bantuan!

2

useCallback — Stabilkan Referensi Fungsi

Di JavaScript, setiap kali komponen re-render, fungsi yang dibuat di dalamnya mendapat alamat memori baru — meskipun isinya sama persis. Ini masalah karena komponen anak yang menerima fungsi itu akan menganggapnya "berubah" dan ikut re-render.

useCallback memastikan fungsi punya referensi yang stabil — tidak berubah alamat memorinya — selama dependensinya belum berubah.

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // ❌ Tanpa useCallback: fungsi baru setiap render
  // const handleClick = () => console.log('clicked');

  // ✅ Dengan useCallback: referensi fungsi stabil
  const handleClick = useCallback(() => {
    console.log('Button diklik!');
  }, []); // ← kosong karena tidak ada dependensi

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <ChildButton onClick={handleClick} />
    </div>
  );
}

3

React.memo — Lindungi Komponen dari Re-render Sia-sia

React.memo adalah Higher-Order Component (HOC) yang membungkus komponen kamu. Ia akan membandingkan props lama dan props baru secara shallow. Jika tidak ada yang berubah, komponen tersebut tidak akan di-render ulang.

Analoginya: seperti satpam pintu yang cek ID. Kalau ID-nya sama, nggak perlu masuk ulang.

import React from 'react';

// ✅ Bungkus komponen dengan React.memo
const ChildButton = React.memo(function ChildButton({ onClick }) {
  console.log('ChildButton render');
  return <button onClick={onClick}>Klik Saya</button>;
});

// Sekarang ChildButton TIDAK akan re-render saat ParentComponent re-render,
// SELAMA props 'onClick' tidak berubah referensinya (gunakan useCallback!)

⚡ Insight Penting: Kombinasi Sempurna

React.memo + useCallback adalah duo maut! React.memo mencegah re-render jika props tidak berubah, tapi kalau fungsi yang kamu kirim sebagai props dibuat ulang setiap render (tanpa useCallback), React.memo jadi tidak berguna karena ia melihat fungsi itu sebagai "props baru". Gunakan keduanya bersama untuk hasil optimal.

🎯 Panduan Praktis: Kapan Harus Pakai Optimasi Performa React?

Sebelum kamu semangat membungkus semua komponen dengan React.memo dan menyemprot seluruh kode dengan useMemo — tunggu dulu! Ada pepatah bijak di dunia programming: "premature optimization is the root of all evil".

Optimasi berlebihan justru bisa membuat kode lebih sulit dibaca dan dipelihara, serta menambah overhead memori. Gunakan ketiga alat ini sesuai kebutuhan.

🔍 Panduan Penggunaan yang Tepat

✅ Gunakan useMemo ketika:

• Kamu punya fungsi filtrasi/sorting pada data besar (ribuan item)
• Perhitungan matematika kompleks yang dipanggil berulang
• Transformasi data yang hasilnya dipakai di banyak tempat

✅ Gunakan useCallback ketika:

• Fungsi dikirim sebagai props ke komponen anak yang pakai React.memo
• Fungsi dipakai sebagai dependensi di hook lain (useEffect, useMemo)

✅ Gunakan React.memo ketika:

• Komponen sering di-render ulang oleh parent, tapi propsnya jarang berubah
• Komponen itu mahal untuk di-render (punya banyak elemen/logika)

⚠️ Perhatian: Jangan Over-Optimasi!

Setiap useMemo dan useCallback itu sendiri punya biaya memori dan komputasi (untuk menyimpan cache dan membandingkan dependensi). Untuk komponen sederhana dengan re-render yang jarang, tidak menggunakan optimasi justru lebih efisien. Ukur dulu, optimasi kemudian. Gunakan React DevTools Profiler untuk menemukan bottleneck nyata.

💡 Tips Alat: React DevTools Profiler

Install ekstensi React Developer Tools di browser-mu. Buka tab Profiler, rekam interaksi, dan kamu bisa melihat komponen mana yang paling sering re-render dan berapa lama waktu rendernya. Ini cara terbaik untuk membuktikan apakah optimasimu benar-benar efektif!

📚

Seri Belajar React: React from Zero to Zorro

Artikel ini adalah bagian ke-11 dari 16. Lihat daftar lengkap seri ini dan mulai belajar dari awal atau lanjutkan dari artikel sebelumnya.

🗺️ Lihat Daftar Isi Lengkap Seri

🏁 Kesimpulan

Kita sudah menjelajahi tiga pilar utama optimasi performa React:

• useMemo — menyimpan hasil kalkulasi berat agar tidak dihitung ulang setiap render
• useCallback — menjaga stabilitas referensi fungsi yang dikirim ke komponen anak
• React.memo — melindungi komponen dari re-render yang tidak perlu ketika props tidak berubah

Ingat: ketiga alat ini paling powerful ketika digunakan bersama dan tepat sasaran. Jangan optimasi sebelum kamu benar-benar mengukur masalah nyata. Gunakan React DevTools Profiler sebagai teman setia untuk membuktikan efektivitas optimasimu.

Di artikel selanjutnya kita akan naik level ke Custom Hook — cara membuat hook sendiri agar kode lebih rapi, reusable, dan profesional. Sampai jumpa! 🚀

🔗 Share Artikel Ini

📘 Lihat Seri Lengkap

#BelajarReact #ZeroToZorro #OptimisasiPerforma #useMemo #useCallback #ReactMemo #ReactPerformance

🧭 Navigasi Artikel

← Artikel Sebelumnya

Manajemen State Lebih Serius: useContext dan useReducer untuk Aplikasi yang Makin Kompleks

Artikel 10

Artikel Selanjutnya →

Custom Hook: Bikin Sendiri Hook-mu Biar Kode Lebih Rapi dan Reusable

Artikel 12