react useParams cache mi tutuyor

Merhaba,
APİ ile bir yemek tarif sitesi üzerinde çalışıyorum. Tarife tıklandığında useparams ile tarif Id sini alıyorum ve fetch ile tarifi ekrana getiriyorum. Ama her tarife tıkladığımda bir önceki açılan tarifin bilgileri ekranda ama eğer url yi yenilersem doğru tarif geliyor ekrana.(çünkü navigate işlemi doğru ve url deki id de doğru)
Hatayı nerede yapıyorum, yardımcı olur musunuz? Yani kodlarımdaki mantığa göre fetch te bir önceki params.id yi getiriyor her fonksiyon çalıştığında ama iyi de neden?
23 ve 38. satırlar

//bu en son ki
import { useEffect, useState } from "react";
import styled from "styled-components";
import { useParams } from "react-router-dom";
import React from "react";
function Recipe() {
  const [details, setDetails] = useState([]);
  const [activeTabs, setActiveTabs] = useState("ingredients");
  const [isLoading, setIsLoading] = useState(null);
  const params = useParams();
  const controller = new AbortController();
  const getDetails = async () => {
    setIsLoading(true);
    // setDetails([]);
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
        "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
      },
    };
    await fetch(
      `https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
      options,
      { signal: controller.signal }
    )
      .then((response) => response.json())
      .then((response) => {
        setDetails(response[0]);
      })
      .then(() => {
        controller.abort();
        setIsLoading(false);
      });
  };
  useEffect(() => {
    getDetails();
  }, [params.id]);
  return (
    <DetailWrapper>
      {isLoading && <p>...Loading</p>}
      {!isLoading && (
        <div>
          <ul>
            {activeTabs === "ingredients" &&
              details.ingredients &&
              details.ingredients.map((ingredient, index) => (
                <li key={index}>
                  {ingredient.amount} {ingredient.ingredientValue}{" "}
                  {ingredient.ingredientKey}
                </li>
              ))}
          </ul>
          <ul>
            {activeTabs === "instructions" &&
              details.descriptionSteps &&
              details?.descriptionSteps?.map((steps, index) => (
                <li key={index}>{steps.description}</li>
              ))}
          </ul>
          <div>
            <div>
              <h2>{details.title}</h2>
            </div>
            <img src={details.img} alt={details.title} />
          </div>
          <Info>
            <div>
              <Button
                className={activeTabs === "instructions" ? "active" : ""}
                onClick={() => setActiveTabs("instructions")}
              >
                Instructions
              </Button>
            </div>
            <div>
              <Button
                className={activeTabs === "ingredients" ? "active" : ""}
                onClick={() => setActiveTabs("ingredients")}
              >
                Ingredients
              </Button>
            </div>
          </Info>
        </div>
      )}
    </DetailWrapper>
  );
}

export default Recipe;

dostum aynı sorunla uzun süre bende uğraştım oradaki mantığı hiçbir zaman anlayamadım. ben çözümü history push ederek buldum

useEffect güncellemelerde çalışıyor mu kontrol et. Büyük ihtimalle güncellemeyi görmüyor.

37. satırdan sonra useEffect e console.log ekledim ve ilk o çalıştı halbuki asenkron olan getDetails in çalışıp bittikten sonra 38. satıra geçmesi gerekmiyor muydu?

Async yapmamışsınız ki.

12 ve 22. Satıra bakar mısınız? Bu async olmuyor mu? Nasıl yani?

Async eventler doğru çalışıyor useparamsın cache tutma ihtimali var. dökümanına bakıp tekrar bilgi vermeye çalışacağım. Async eventler kodu bloklamaz senkron işlemlerden sıyrılıp işlem yapar yani console basması çok normal

Async-await akışı yanlış. Siz fonksiyonu async yapıp, içerisinden await olarak bir fetch işlemi almışsınız. Buraya kadar problem yok ama Fetch'in çıktısı async edilmemiş. .then'ler ile state ayarlamaları yapmışsınız ancak .then dönüşleri yok. Ek olarak useEffect'ten fonksiyonu async olarak çağırmamışsınız. Gerçi çağırılsa bile dışarıya çıktı vermiyor şu anda fonksiyon. useParams cache tutmaz. Ne geliyorsa onu direkt olarak vermesi gerekir.

Dediğiniz üzere bu şekilde değişiklik yaptım. Ama sonuç yine aynı.

 const getDetails = async () => {
    setIsLoading(true);
    // setDetails([]);
    const options = {
      method: "GET",
      headers: {
        "X-RapidAPI-Key": process.env.REACT_APP_MEAL_RECIPE_API_KEY,
        "X-RapidAPI-Host": "food-recipe-api.p.rapidapi.com",
      },
    };
    await fetch(
      `https://${process.env.REACT_APP_MEAL_RECIPE_API_HOST}/recipe/${params.id}`,
      options,
      { signal: controller.signal }
    )
      .then(async (response) => await response.json())
      .then(async (response) => await setDetails(response[0])
      )
      
      const cleanUp = () => {
        controller.abort();
        setIsLoading(false);
      };
      return cleanUp();
  };
  useEffect(() => {
    getDetails();
   
  }, [params.id]);