React Lanjutan: Performance, Context & Custom Hooks (Level Dewa)

Selamat datang di level terakhir, Para Penyihir Kode! 🧙‍♂️

Kita udah bangun istana LEGO (Basic) dan belajar jurus teleportasi (Intermediate). Sekarang, waktunya kita optimasi sihir kita biar istananya nggak meledak.

Hari ini menu kita adalah Konsep React Lanjutan. Ini yang membedakan orang yang sekadar “tau React” sama pro yang beneran “paham React”.

Menunya:

1. Optimasi Performance - Mencegah render ulang yang nggak perlu (karena lemot itu musuh bersama).
2. Context API - Bagi-bagi data tanpa harus ngoper lewat 10 lapisan komponen.
3. Custom Hooks - Bikin mantra ajaib sendiri.
4. Testing - Tidur nyenyak karena yakin kodingan aman.

Yuk, sikat! 🔨

1. Performance: Stop Render Ulang!

React itu cepet, tapi kadang bisa bego juga. Kadang emaknya bersin (update state), eh anak-anaknya ikutan render ulang padahal nggak ngapa-ngapain.

React.memo

Bayangin ada komponen yang isinya cuma judul statis. Kalau parent-nya update, komponen judul ini ikutan ngerender. Buang-buang tenaga! Bungkus pake memo, dan React bakal bilang: “Woy, props-nya nggak berubah nih. Gue tidur aja ya daripada ngerender.”

import { memo } from 'react';

const Judul = memo(({ teks }) => {
  console.log("Ngerender Judul..."); // Ini gak bakal jalan kalo props sama
  return <h1>{teks}</h1>;
});

useMemo & useCallback

Ini buat nge-cache (ngafalin) sesuatu.

• useMemo: Ngafalin nilai (hasil hitungan berat).
• useCallback: Ngafalin fungsi.

Analoginya:

• useMemo: Kamu ngerjain soal matematika susah (2342 * 3242) terus jawabannya ditulis di tangan. Pas ada yang nanya lagi, tinggal kasih liat tangan, nggak usah ngitung ulang.
• useCallback: Kamu ngafalin pidato. Kamu nggak nulis ulang pidatonya tiap kali masuk ruangan baru.

const nilaiBerat = useMemo(() => hitunganRibet(a, b), [a, b]);
const fungsiStabil = useCallback(() => lakuinSesuatu(), []);

2. Context API: Bye-bye Prop Drilling

Pernah ngoper props dari Kakek -> Ortu -> Anak -> Cucu? Itu namanya Prop Drilling, dan itu capek banget.

Context itu kayak portal teleportasi. Kamu taruh data di “Provider” paling atas, dan komponen APAPUN di bawahnya bisa langsung ambil pake useContext.

import { createContext, useContext } from 'react';

// 1. Bikin Context-nya (Portal)
const TemaContext = createContext('light');

const App = () => {
  return (
    // 2. Sediain nilainya
    <TemaContext.Provider value="dark">
      <Toolbar />
    </TemaContext.Provider>
  );
};

const Toolbar = () => {
  // Toolbar gak butuh tema, tapi anaknya butuh.
  // Gak perlu oper props di sini!
  return <Tombol />;
};

const Tombol = () => {
  // 3. Langsung ambil nilainya!
  const tema = useContext(TemaContext);
  return <button className={tema}>Saya temanya {tema}</button>;
};

3. Custom Hooks: Sihir Buatan Sendiri

Kamu tau useState dan useEffect. Tapi tau nggak kalo kamu bisa bikin sendiri? Kalau kamu sering copy-paste logika yang sama (misal fetch data) di banyak komponen, bikin aja Custom Hook.

Itu cuma fungsi JavaScript biasa yang diawali kata use dan manggil hooks lain.

// useLebarLayar.js
import { useState, useEffect } from 'react';

export function useLebarLayar() {
  const [lebar, setLebar] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setLebar(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return lebar; // Balikin data yang kita butuh
}

// Komponen.js
const KomponenSaya = () => {
  const lebar = useLebarLayar(); // Liat betapa bersihnya ini!
  return <p>Lebar layar: {lebar}</p>;
};

4. Testing: Percaya Boleh, Cek Dulu

Kita nggak bakal dalem banget di sini, tapi inget: Tulis Test. Alat kayak Jest dan React Testing Library bantu kamu simulasiin user.

Daripada ngeklik-ngeklik aplikasi manual tiap kali ganti satu baris kode, mending suruh robot (script) yang ngerjain.

test('menampilkan link belajar react', () => {
  render(<App />);
  const elemenLink = screen.getByText(/belajar react/i);
  expect(elemenLink).toBeInTheDocument();
});

Wisuda 🎓

Selamat! Kamu udah naik kelas dari “JSX itu apa?” jadi “Gue optimasi re-render pake memoization.”

Perjalanan React itu nggak ada ujungnya, tapi sekarang kamu udah punya fondasi kuat buat bikin apa aja. Portofolio, sosmed, aplikasi SaaS… langit adalah batasnya.

Terus berkarya, terus ngulik, dan yang paling penting… jangan lupa seneng-seneng pas ngoding.

Semangat! 🥂