Can I use async call with useState(functionName) [duplicate]

Question

Learning react so please bear with...

Below code works for me and allows me to set the valueOne as OneOneOne

import react from "React";

function LoadPage() {
  const [valueOne, setvalueOne] = useState(GetValueOne);

  function GetValueOne() {
    return "OneOneOne";
  }
}

The issue I am having is I need to make a call to the server to return the actual value of valueOne on page load... So I have changed to the following:

async function GetValueOne() {
  let oneResult;

  await axios.get(`${getBaseUrl()}/One/GetValueOfOne`).then((res) => {
    oneResult = res.data;
  });

  return oneResult;
}

This is now not working as I have changed the function to async to wait for the axios.get request...Can I update the useState to match this?

If not is there another way to do this please?

From the duplicate (which is quite old), scroll down to this answer which covers function components and hooks — Phil
– Phil, Commented Feb 7, 2024 at 4:32

Maulik Bhalani · Accepted Answer · 2024-02-07 04:16:43Z

1

You can achieve this using UseEffect hook in ReactJS. You can initialize the state with null value and then update it once the component mounts for the first time.

Sample code:

 const [valueOne, setValueOne] = useState(null);
  
    useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`);
        setValueOne(response.data);
      } catch (error) {
        console.error('Error fetching valueOne:', error);
      }
    }

    fetchData();
  }, []);

On above useEffect, I have added empty square bracket which means useEffect only run once when component mounts.

Here, is full code implementation:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function LoadPage() {
  const [valueOne, setValueOne] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`);
        setValueOne(response.data);
      } catch (error) {
        console.error('Error fetching valueOne:', error);
      }
    }

    fetchData();
  }, []); // Empty dependency array to only run once on mount

  return (
    <div>
      <h1>Value of valueOne: {valueOne}</h1>
    </div>
  );
}

export default LoadPage;

Let me know, If you have any questions.

answered Feb 7, 2024 at 4:16

Maulik Bhalani

7922 gold badges7 silver badges24 bronze badges

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

1 Comment

John Over a year ago

Thank you for taking the time to respond, this has resolved the issue

ALTHAF P JALEEL · Accepted Answer · 2024-02-07 04:12:38Z

You should use useEffect in this case.

You can initialize the state with some dummy value inside useState and add a an effect to update the state value

function LoadPage() {
  
  const [valueOne, setValueOne] = useState({})  
  
  useEffect(() => {
  
    async function getValueOne() {
      const oneResult = await axios.get(`${getBaseUrl()}/One/GetValueOfOne`)
      setValueOne(oneResult.data)
    }
    getValueOne()
    
  }, [])
  
}

Alternatively, if your project is getting bigger

You can take a look at some data fetching/management libraries like Tanstack Query, SWR etc..
You can also take a look at global state solutions like Redux coupled with middlewares like Thunk / Saga for data fetching

Collectives™ on Stack Overflow

Can I use async call with useState(functionName) [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related