Using an abort controller, in its rawest form:

const controller = new AbortController();
const { signal } = controller;
...

fetch(url, { signal });

...
// abort
controller.abort();

To abort an in-flight fetch in effect hook

useEffect(() => {
  const controller = new AbortController();
  const { signal } = controller;
  fetch(url, { signal });

  return () => {
    controller.abort(); // abort on unmount for cleanup
  };
}, []);

I found this article very informative when I needed to develop a way to cancel fetch requests.

The signal needs to be added to the fetch requests options object. You can also define the async fetchData function inside the effect (this is normal), so it's all enclosed in the effect hook's callback scope.

export const useMovieDetailsFetch = (movieId) => {
  const [state, setState] = useState({})
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(false)

  useEffect(() => {
    const controller = new AbortController();
    const { signal } = controller;

    const fetchData = async () => {
      setError(false);
      setLoading(true);

      try {
        const movieDetailsEndpoint =
          `${MOVIE_API_URL}movie/${movieId}?api_key=${MOVIE_KEY}`;
        const result =
          await (await fetch(movieDetailsEndpoint, { signal })).json();
        const creditsEndpoint =
          `${MOVIE_API_URL}movie/${movieId}/credits?api_key=${MOVIE_KEY}`;
        const creditsResult =
          await (await fetch(creditsEndpoint, { signal })).json();
        // Filtring in crew for directors only
        const movieDirectors = creditsResult.crew.filter(
          (member) => member.job === 'Director'
        );

        setState({
          ...result,
          movieDirectors,
          actors: creditsResult.cast,
        });
      } catch (error) {
        setError(true);
      }
      setLoading(false);
    }

    fetchData();

    return () => controller.abort();
  }, [movieId]);

  return [state, loading, error];
}

This behavior is most likely because of React's StrictMode, which mounts, unmounts and then re-mounts your component on purpose to detect any potential issues within your React app. You can read more about this on the docs.

Since your component is unmounting, then the abort() method of the controller is executing as expected in your useEffect's cleanup function.

You could remove StrictMode and your problem would be solved, but this is generally not a good idea/practice (it's there for a reason, after all) and if remounting breaks the logic of your app, then there is definitely something wrong with it.

What you can do is check for the error.name and don't perform any action if it's AbortError, or you can also check the controller.signal.aborted flag. After all, when this happens, the component is unmounted at this point anyways.

try {
    const response = await fetch(
      `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`,
      { signal }
    );

    if (!response.ok) {
      throw new Error();
    }
    let data = await response.json();
    setDefinition(data);
    setisLoading(false);
    console.log(data);
  } catch (error) {
    if (error.name !== "AbortError") { // Or if (!controller.signal.aborted)
    console.log("error is", error);
    setExist(false);
   }
  }
};