CODEWITHSUNDEEP
reactjsreact-hooks
Retrosec6
Retrosec6

Reputation: 179

useEffect hook is not waiting for an async depency

I'm using useEffect hook to implement some logic after an async function that contains an API call return an array of objects which is the the dependecy of the hook.

The problem is that the hook itself is not waiting for the array to change in order to execute the logic inside of it, it just executes even if availableSites is still []:

const [availableSites, setAvailableSites] = useState([]);

useEffect(initialize, [getAxiosInstance])

async function initialize() {
    // ...
    const initPage = async () => {
      try {
        const response = await getAxiosInstance().get(GetObjects); // Api EndPoint
        if (response.data) {
          setAvailableSites(response.data); // data for availableSites
          const Secondresponse = await somePromise(); // Another API call thas lasts around 10 seconds
          if (response && response.status === 200) {
            // ...
          }
        }
      } catch {
        // ...
      }
    };
    initPage();
  }
        
// useEffect that is failing
useEffect(() => {
  // I want this to happen when availableSites has recieved the data
}, [availableSites]);

Upvotes: 1

Views: 1343

Answers (2)

ghkatende
ghkatende

Reputation: 487

If we have multiple instances of useEffect in the component, all the useEffect functions will be executed in the same order as they are defined inside the component the behavior you're getting is expected. Try checking if the array length has changed since the second useEffect depends on the [availableSites] so it will run again if the values of [availableSites] change.

Upvotes: 0

FireFighter
FireFighter

Reputation: 706

useEffect is always going to execute at least once, doesn't matter what dependencies it has. If you only want it to execute when the data is set, use something like:

useEffect(() => {
  if(availableSites.length > 0) {
    doSomething...
  }
}, [availableSites]);

If availableSites coming from the backend could be empty, set the initial state of availableSites to null and check if it's not null in the useEffect

Upvotes: 6

Related Questions