ReactOptimizasyonJavaScript1 dk okuma

React’te useEffect ve useState’e Veda Edin

React’te veri getirmeyi yönetmek, özellikle useEffect ve useState kullanıldığında karmaşık kod yapılarına yol açabilir. İşe yarasa da bu yaklaşım, uzun ve tekrarlı kod üretir. Bu duruma çoğu zaman “state management cehennemi” denir.

npm i @tanstack/react-query

@tanstack/react-query, React için asenkron işlemleri sadeleştiren güçlü bir veri getirme kütüphanesidir. Uygulamalarınızda sunucu durumunu getirmek, önbelleğe almak, eşitlemek ve güncellemek için araçlar sunar. Otomatik caching, arka planda güncelleme, yeniden deneme ve hata yönetimi gibi özelliklerle verimliliği ve kod okunabilirliğini artırır.

useQuery

import { useEffect, useState } from 'react';

const [data, setData] = useState([]);

const [isLoading, setIsLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => {

  const fetchData = async () => {

    try {

      const response = await fetch('/posts');

      const result = await response.json();

      setData(result);

    } catch (error) {

      setError(error);

    } finally {

      setIsLoading(false);

};

  fetchData();

}, []);

import { useQuery } from '@tanstack/react-query';

const fetchData = async () => {

  const response = await fetch('/posts');

  return response.json();

};

const { data, error, isLoading } = useQuery(['posts'], fetchData);

useQuery:0

useState:0

useEffect:0

cache:no

satır:

Geleneksel yaklaşım: `useEffect` ve `useState`

Karmaşıklık: Birden fazla durum değişkeni (data, isLoading, error) gerektirir.
Boilerplate: Veri getirme, hata yönetimi ve yüklenme durumları için kapsamlı hazırlık gerektirir.
Caching yok: Her veri getirme çağrısı bağımsızdır; yerleşik bir caching mekanizması yoktur.

Optimize edilmiş yaklaşım: TanStack Query’den `useQuery`

Sadelik: Durum yönetimini tek bir hook’ta toplar.
Otomatik caching: Yerleşik caching sayesinde gereksiz ağ isteklerini azaltır.
Daha temiz kod: Kod satırı sayısını önemli ölçüde azaltır ve okunabilirliği artırır.

useMutation

import { useState } from 'react';

const [isLoading, setIsLoading] = useState(false);

const [isError, setIsError] = useState(null);

const [isSuccess, setIsSuccess] = useState(false);

const handleUpdate = async () => {

  setIsLoading(true);

  setIsError(null);

  setIsSuccess(false);

  try {

    const response = await fetch('/posts/1', {

      method: 'PUT',

      body: JSON.stringify({ title: 'Updated Title' }),

});

    if (!response.ok) {

      throw new Error('Network response was not ok');

    await response.json();

    setIsSuccess(true);

  } catch (error) {

    setIsError(error);

  } finally {

    setIsLoading(false);

};

import { useMutation } from '@tanstack/react-query';

const updateData = async (newData) => {

  const response = await fetch('/posts/1', {

    method: 'PUT',

    body: JSON.stringify(newData),

});

  return response.json();

};

const mutation = useMutation(updateData);

const handleUpdate = () => {

  mutation.mutate({ title: 'Updated Title' });

};

const { isLoading, isError, isSuccess } = mutation;

useMutation:0

useState:0

satır:

Verimli yaklaşım: `useMutation`

Sade süreç: Veri değiştirme mantığını kapsüller ve tekrarlanan kodu azaltır.
Yerleşik state management: Yüklenme, hata ve başarı durumlarını otomatik izler.
Daha temiz kod: Daha az satırla okunabilirliği ve bakım kolaylığını artırır.

Geleneksel yaklaşım: elle state management

Uzun hazırlık: Veri değiştirme durumlarını izlemek için birden fazla useState hook’u gerektirir.
Karmaşık mantık: Ayrıntılı hata yönetimi ve durum güncellemeleri içerir.
Artan karmaşıklık: Daha fazla kod satırına ve hata ihtimaline yol açar.

@aykutkardas

Bu içerik size yardımcı olduysa bana bir kahve ısmarlayabilirsiniz.

İlgili yazıTypeScript: Omit & Pick

yazılım, tasarım ve yapay zekâ üzerine etkileşimli yazı ve kurslardan haberdar olmak için bültene katılabilirsiniz. Ayda en fazla birkaç e-posta alırsınız.