Promise.all in useEffect hook in React

I'm dealing with a use case where two API calls are made one after the other. The second API call is made by taking a value from the first API call response. I was able to use Promise.all with axios in my React application.

Is there a better way to call the APIs in chain in useEffect hook? I'm open to suggestions or recommendations. Could anyone please help?

 useEffect(async () => {
    const getFirstResponse = async () => {
      try {
        return await axios.get('http://first-api', {
          params: { carId: id },
        });
      } catch (error) {
        return error;
      }
    };

    const firstResponse = await getFirstResponse();

    const getSecondResponse = async () => {
      try {
        return await axios.get('http://second-api', {
          params: { carName: firstResponse.data?.carName },
        });
      } catch (error) {
        return error;
      }
    };

    const secondResponse = await getSecondResponse();

    Promise.all([firstResponse, secondResponse])
      .then(function (values) {
        console.log(`values`, values);
      })
      .catch(function (err) {
        console.log(err);
      });

  }, []);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW