Memahami Manajemen State dalam Aplikasi React

Manajemen state adalah aspek penting dalam mengembangkan aplikasi React. Hal ini melibatkan penanganan perubahan data di dalam sebuah komponen dan di seluruh komponen yang berbeda untuk memastikan interaksi dan pembaruan yang mulus. Tanpa manajemen state yang tepat, pemeliharaan dan penskalaan aplikasi React dapat menjadi kompleks dan tidak efisien. Artikel ini membahas dasar-dasar manajemen state di React, berbagai pendekatan, dan praktik terbaik untuk menangani state secara efektif.

Apa yang dimaksud dengan State dalam React?

State dalam React adalah sebuah objek yang berisi data dinamis dan mengontrol perilaku sebuah komponen dan bagaimana komponen tersebut di-render. Berbeda dengan props yang tidak dapat diubah dan diteruskan ke komponen anak dari komponen induk, state dapat diubah dan dikelola secara internal. React merender ulang seluruh komponen untuk menampilkan data baru, ketika state berubah, hal ini akan memperbarui UI untuk memastikan bahwa komponen tersebut responsif terhadap input pengguna.

sumber: bitsrc.io

React menyediakan hook useState dan useReducer untuk mengelola state lokal. Sebagai contoh:

import React, { useState } from 'react';

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

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

Hook useState memungkinkan komponen untuk mempertahankan state internal tanpa bergantung pada komponen kelas.

State dalam Aplikasi React

State lokal: Di dalam satu komponen. useState atau useReducer. Baik digunakan untuk mengelola input form, modal, toggle UI, dll.
Global State: ini digunakan bersama di banyak komponen dan biasanya dikelola menggunakan library manajemen state eksternal, seperti Redux dan Context API.
Status Server: Data yang berasal dari API eksternal, sangat berguna untuk penggunaan React Query atau SWR untuk mengelola caching dan sinkronisasi latar belakang.
URL State: Informasi yang disimpan dalam URL browser, seperti parameter query dan status rute, ditangani menggunakan React Router.

Pendekatan Manajemen State

1. Merangkai State dalam React: Cara Bawaan

Untuk aplikasi kecil hingga menengah, alat bawaan React seperti useState, useReducer, dan Context API sudah cukup. Context API adalah bagian dari library inti React yang digunakan untuk manajemen state global tanpa memerlukan library pihak ketiga, berbagi data dengan mudah antar komponen tanpa perlu melakukan prop drilling.

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}

function ThemedComponent() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<div>
<p>Current Theme: {theme}</p>
<button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
Toggle Theme
</button>
</div>
);
}

2. Redux

Pustaka manajemen state yang banyak digunakan yang secara khusus ditujukan untuk aplikasi dengan jumlah data yang besar. Ini menyediakan penyimpanan terpusat yang mengelola state aplikasi secara terprediksi.

Baiklah! Konsep utama dalam Redux adalah:

Menyimpan: Sumber tunggal kebenaran untuk seluruh aplikasi Anda.
Tindakan: Objek-objek yang mendeskripsikan perubahan state
Reducers: Berfungsi untuk menentukan bagaimana keadaan berubah berdasarkan tindakan.
Pengiriman: Sebuah cara untuk mengirim aksi ke reducer.

Redux dasar yang sudah disiapkan:

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
}

const store = createStore(counterReducer);

Redux lebih kompleks untuk disiapkan, tetapi juga menyediakan alat yang ampuh untuk manajemen state dalam aplikasi yang lebih besar.

3. Zustand

Ini adalah pustaka manajemen state yang minimalis dan sering dianggap sebagai alternatif yang lebih sederhana dari redux dengan API yang lebih kecil dan boilerplate yang lebih sedikit.

import create from 'zustand';

const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 }))
}));

function Counter() {
const { count, increment } = useStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

4. React Query

React Query meningkatkan pengambilan API, caching, dan sinkronisasi latar belakang, menjadikannya solusi untuk state server. Ini menghilangkan kebutuhan Redux dalam kasus penggunaan pengambilan data.

import { useQuery } from 'react-query';

function FetchData() {
const { data, error, isLoading } = useQuery('data', fetchData);

if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error fetching data</p>;

return <div>{data}</div>;
}

Mengoptimalkan Pengelolaan Negara

State Lokal: Jika bisa, hindari global state ini untuk data khusus komponen, gunakan useState atau useReducer sebagai gantinya.
Gunakan Context API untuk Global State secara sederhana: Gunakan Context API alih-alih redux, ketika Anda perlu berbagi state moderat di antara komponen.
Sempurnakan Kinerja Anda: Gunakan useMemo, useCallback, dan hanya me-render ulang komponen tertentu yang akan di-coile.
Normalisasi State: pastikan state terstruktur secara logis sehingga Anda tidak menyimpan data dua kali.
Gunakan Pustaka Eksternal dengan Bijak: Kompleksitas linear dari aplikasi Anda akan menentukan apakah Anda perlu menggunakan Redux Zustand atau React Query atau tidak.

Kesimpulan

Manajemen state yang efektif sangat penting untuk membangun aplikasi React yang dapat diskalakan dan dipelihara. Memilih pendekatan manajemen state yang tepat tergantung pada ukuran dan kompleksitas proyek Anda. Tools bawaan React cocok untuk aplikasi kecil, sementara Redux, Zustand, dan React Query lebih cocok untuk aplikasi yang lebih besar dengan aliran data yang kompleks. Dengan menerapkan praktik terbaik, pengembang dapat meningkatkan kinerja dan pemeliharaan dalam aplikasi React mereka.