React’ta Link-Fetch-State Kullanımları/Gereksiz fetch kullanımının önüne nasıl geçilir ve ne gibi hatalar karşımıza çıkabilir?

Herkese merhaba. React’ta gereksiz fetch kullanımının önüne nasıl geçebileceğimizi anlatacağım.

Benim bir kullanıcı listem var ve tıkladığım kullanıcının bilgilerini görüntülemek istiyorum. Bunun için kullanıcıları gerekli yerden çekmeliyim.

function Users() {
    const[users,setUsers]=useState([]);
    useEffect(()=>{
        fetch("https://jsonplaceholder.typicode.com/users")
        .then((res)=>res.json())
        .then((data)=>setUsers(data));
    },[])
  return (
    <div>
      <h2>Users</h2>
      <ul>

     {users.map((user)=>(<li key={user.id}>
        <Link to={`${user.id}`} state={user}>{user.name}</Link>
        </li>))}
      </ul>
       
    </div>
  )
}

export default Users

Görüldüğü üzere sayfa ilk açıldığında tüm kullanıcıları gerekli siteden çekip map ile listeliyorum. Ben her kullanıcının bilgisinin tıklandığında görülmesini istiyordum. Bu yüzden hepsinin ayrı ayrı kendine ait linkleri olmalı.

Linke tıkladığımızı düşünelim. Tıkladığım kullanıcıya ait bilgileri çekmek için yine gerekli siteden fetch etmem gerekir. Fakat ben “state” kullanarak tüm kullanıcıların bilgilerini o link üzerinden aktarırsam buna gerek kalmaz. Her seferinde linke tıkladığımda tekrardan kullanıcıların bilgilerini almam gerekmez.

Burada dikkat edilmesi gereken konu sadece bu link üzerinden kullanıcıların bilgilerinin gelmesi. Yani ben farklı bir linkten gidersem veya arama çubuğuna üstten aynı linki yazarsam bir şey göremem. Kullanıcıya tıkladıktan sonra neler olacağına dair koda beraber bakalım.

function UserDetail() {
  const {id}=useParams();
  const location=useLocation();
  const[user,setUser]=useState(location.state);
  //console.log(location.state);
 
  
  useEffect(()=>{
    
    if(!user?.id){
     fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
     .then((res)=>res.json())
     .then((data)=>setUser(data));
    }
  },[id,user])


  useEffect(()=>{
    if (location.state?.name === "safak") {
      
     fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
     .then((res)=>res.json())
     .then((data)=>setUser(data));
    }
  },[id])


  return (
    <div>
      <h2>Kullanıcı Detayları</h2>
      {user && <pre> {JSON.stringify(user,null,2)}</pre>}
      <Link  to={`/users/${Number(id)+1}`} state={{name:"safak"}}>Sonraki Kullanıcı</Link>
    </div>
  )
}

export default UserDetail

Kullanıcı bilgimi “location.state” ile alıyorum. Yani Link içindeki state ile alıyorum.Eğer ki kullanıcı bilgisi bende yoksa “fetch” ile çekmesini söylüyorum. Yani farklı bir linkten gelirsem fetch etmesini istiyorum.

Kullanıcılarım bu şekilde. Birine tıklayalım.

Bu şekilde görülmekte.

Get Safakyolalan’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Burada sonraki kullanıcı diye bir linkimiz var. Normalde bu linke tıklarsam bu link üzerinden herhangi bir kullanıcı göndermediğim için bir şey göremem. Fakat UseEffect içinde fetch de etmez çünkü benim kullanıcı bilgilerim o an mevcut. Yani link yönlendirse bile benim o linke bastığım sayfada bir kullanıcı var ve o kullanıcının idsi de var. O yüzden bu kısım için yeni bir “useEffect” tanımladım.

State ile name gönderdim ve bu link başarıyla çalıştı fakat listemde olan 10 kullanıcıyı geçtiğim anda sonsuz döngüye girdi.

Çünkü o anda:

. İlk useEffect ‘teki if bloğundan yine geçemez ve ikinci useEffect ‘ e gelir.

. Fetch işlemi sonucu herhangi bir kullanıcı bulamaz ve kullanıcı null olur.

. Kullanıcı null olunca bu sefer ilk useEffect’e girer ve orada fetch eder.

. Oradaki fetch içinde de yine kullanıcıyı bulamaz ve aynı useEffect’e girer. Böylelikle sürekli kendini tekrarlayarak sonsuz döngüye girer.

Sizce bu durumu nasıl çözebiliriz? Bu kısmı size bırakıyorum.