populate multiple dropdown data using useEffect

Question

This is how I am trying to populate two dropdowns in my component using useEffects.

function populate_dropdown_one_data() {
    return axios.get("http://127.0.0.1:5001/dropdownonedata");
}

function populate_dropdown_two_data() {
    return axios.get("http://127.0.0.1:5000/dropdowntwodata");
}

React.useEffect(() => {
    populate_dropdown_one_data()
      .then(result => {
        setDropDownOneData(result.data.data);
      });
  }, []);

React.useEffect(() => {
    populate_dropdown_two_data()
      .then(result => {
        setDropDownTwoData(result.data.data);
      });
  }, []);

This only calls populate_dropdown_one_data when the page loads.

If I combine populate_dropdown_one_data and populate_dropdown_two_data inside one useEffect, it only calls populate_dropdown_two_data.

How do I populate data for both the dropdowns when the page loads?

You could use promise.all React.useEffect(() => Promise.all([populate_dropdown_one_data, populate_dropdown_one_data]).then(values => setDropDownData(values)) , []) — Denis Tsoi
– Denis Tsoi, Commented Oct 21, 2019 at 3:07
@JosephD.: I added alert in the useEffects. You are right. Both are called but only one makes the call to the server (populate_dropdown_two_data). I think I may have to use async await in useEffects here? — Asdfg
– Asdfg, Commented Oct 21, 2019 at 3:19

Joseph D. · Accepted Answer · 2019-10-21 03:36:23Z

1

State update is not batched for asynchronous operations.

You can await for both operations in one effect.

React.useEffect(
  () => {
    const fetchData = async () => {
      const one = await populate_dropdown_one_data();
      const two = await populate_dropdown_two_data();

      setDropDownOneData(one.data.data);
      setDropDownTwoData(two.data.data);
    };

    fetchData();
  },
  []
);

edited Oct 21, 2019 at 3:36

answered Oct 21, 2019 at 3:24

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

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

Comments

AngelSalazar · Accepted Answer · 2019-10-21 03:31:33Z

0

React.useEffect(() => {
 async function load() {
  const [dropdown1, dropdown2] = await Promise.all([
    populate_dropdown_one_data(),
    populate_dropdown_two_data()
  ])
  setDropDownOneData(dropdown1.data.data);
  setDropDownTwoData(dropdown2.data.data);
 }

 load();
}, [])

answered Oct 21, 2019 at 3:31

AngelSalazar

3,1131 gold badge19 silver badges24 bronze badges

1 Comment

Asdfg Over a year ago

this only makes ajax call for populate_dropdown_two_data.

Collectives™ on Stack Overflow

populate multiple dropdown data using useEffect

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related