Is it possible to fetch API without useEffect in React JS?

Question

Hello i'm newbie here... I found my friend's code when he using useState instead of using useEffect to fetch the API. I tried it and it worked, the code didn't cause an error and infinite loops.

here is for the code

import { useState } from "react";
import { IN_THEATER, POSTER } from "../../../constant/movies";
import { GlobalGet } from "../../../utilities/fetch";

const Service = () => {
  const [movieData, setMovieData] = useState({ data: null, poster: null });

  const fetchMovieData = async () => {
    try {
      let movieRes = await GlobalGet({ url: `${IN_THEATER}` });
      return movieRes;
    } catch (error) {
      console.log(error);
    }
  };

  const fetchPoster = async () => {
    try {
      let posterRes = await GlobalGet({ url: `${POSTER}` });
      return posterRes;
    } catch (error) {
      console.log(error);
    }
  };

  const fetchData = async () => {
    setMovieData({
      data: await fetchMovieData(),
      poster: await fetchPoster(),
    });
  };

  useState(() => { //<=here it is
    fetchData();
  }, []);
  return {
    movieData,
  };
};

export default Service;

And my question is, why it could be happen ? why using useState there doesn't cause an infinite loops ?

Nick Parsons · Accepted Answer · 2022-09-11 04:01:03Z

4

The useState() function can accept an initializer function as its first argument:

const [state, setState] = useState(initializerFunction)

When a function is passed to useState(), that function is only called once before the component initially mounts. In your case below, the initializer function is an anonymous arrow function:

useState(() => { // <-- Initializer function invoked once
  fetchData();
}, []);

Here, the initializer function is () => { fetchData(); }, which is invoked once before the initial mount, so the fetchData() method is only called once. The array that is passed as the second argument [] is useless and doesn't do anything in this case as it's ignored by useState(). The above useState would behave the same if you did useState(fetchData);. Because fetchData() is only called once on the initial mount, any state updates of your component don't cause the fetchData() function to execute again as it's within the initializer function.

With that said, useState() shouldn't be used for fetching data on mount of your component, that's what useEffect() should be used for instead.

edited Sep 11, 2022 at 4:01

answered Sep 11, 2022 at 3:50

Nick Parsons

51.7k6 gold badges62 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gmoniava Over a year ago

Just addition: react also asks you to have the initializer function pure (though bit strange since it should be called once): beta.reactjs.org/apis/react/….

Nick Parsons Over a year ago

@GiorgiMoniava Thanks for the addition :) Yeah, it's interesting that it should be pure. I guess that while it's only called once per component, it could be executed multiple times if there are multiple instances of the component, so you'd want the initial state to be the same for each of the component instances if they're each called in the same way.

LiquiD.S1nn3r · Accepted Answer · 2022-09-11 03:36:38Z

-1

Generally it's possible to fetch data from outside of the useEffect hook.

Somewhere in the body of your component...

const [fetchedData, setFetchedData] = useState(false)

const someFetchFunc = asyunc (url) => {

setFetchedData(!fetchedData)

const res = await fetch(url)
const data = await res.json()
setMovieData(data)

}

!fetchedData && someFetchFunc()

But this is an antipattern. In this case developer lacks a whole toolset of dealing with possible issues. What if fetching fails?

So, it's generally a good idea to handle all the side effects like fetching in a place that was intended for that. It's useEffect hook)

answered Sep 11, 2022 at 3:36

LiquiD.S1nn3r

19510 bronze badges

Collectives™ on Stack Overflow

Is it possible to fetch API without useEffect in React JS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related