Server State dalam ReactJS

   April 17, 2025       Mahatma Mahardhika

---

Server State dalam ReactJS

Table of Contents

• Pengertian Server State
• Perbedaan Server State dan Global State
• Cara Mengelola Server State
• Manfaat Server State
• Contoh Penerapan
• Kesalahan yang Sering Terjadi
• Kesimpulan

---

Pengertian Server State

Server State adalah state yang berasal dari server atau sumber data eksternal, seperti API atau database. State ini tidak hanya dikelola di sisi klien tetapi juga bergantung pada komunikasi dengan server.

---

Perbedaan Server State dan Global State

Server State	Global State
Data berasal dari server atau API.	Data dikelola di dalam aplikasi React.
Memerlukan fetch, update, dan sinkronisasi dengan backend.	Hanya dikelola di sisi frontend.
Digunakan untuk data seperti daftar pengguna, produk, atau artikel.	Digunakan untuk state aplikasi seperti tema atau autentikasi.

---

Cara Mengelola Server State

Menggunakan Fetch API

Metode sederhana untuk mengambil data dari server.

import { useState, useEffect } from "react";

const FetchData = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return 
Loading...
;
  return (
    

      {data.map(post => (
        
{post.title}
      ))}
    
  );
};

Menggunakan React Query

React Query membantu mengelola state server dengan caching dan auto-fetching.

import { useQuery } from "react-query";

const fetchPosts = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts");
  return response.json();
};

const Posts = () => {
  const { data, error, isLoading } = useQuery("posts", fetchPosts);

  if (isLoading) return 
Loading...
;
  if (error) return 
Error fetching data
;

  return (
    

      {data.map(post => (
        
{post.title}
      ))}
    
  );
};

---

Manfaat Server State

• Sinkronisasi data dengan server: Memastikan data di UI selalu sesuai dengan server.
• Optimasi performa: Mengurangi penyimpanan state yang tidak perlu di frontend.
• Mudah di-cache dan di-refresh: Dengan React Query, data dapat di-cache untuk meningkatkan responsivitas.

---

Contoh Penerapan

Server State sering digunakan dalam:

• Pemanggilan data pengguna dari API.
• Sinkronisasi data real-time dalam dashboard.
• Pengelolaan daftar produk dalam aplikasi e-commerce.

---

Kesalahan yang Sering Terjadi

• Melakukan fetching di setiap render: Gunakan dependency array dalam useEffect atau caching dengan React Query.
• Tidak menangani loading dan error state: Pastikan selalu ada pengecekan sebelum menampilkan data.
• Menimpa state lama tanpa validasi: Perbarui state dengan mempertimbangkan data sebelumnya.

---

Kesimpulan

Server State dalam ReactJS memungkinkan pengelolaan data yang berasal dari server dengan cara yang efisien. Dengan menggunakan Fetch API atau React Query, pengembang dapat memastikan data tetap sinkron dengan backend, meningkatkan performa, dan menghindari masalah seperti fetch berulang atau tidak menangani error dengan baik.