React useState return undefined with async await

If you are working with React and using the useState hook, you might come across a situation where the state value returns undefined when using async/await syntax. This can be quite frustrating, but don’t worry, there are a couple of solutions to this problem.

Solution 1: Using a Loading State

One way to handle this issue is by introducing a loading state to indicate when the async operation is in progress. Here’s an example:

const [data, setData] = useState(null); const [loading, setLoading] = useState(true);


useEffect(() => {

  const fetchData = async () => {

    try {

      const response = await fetch('https://api.example.com/data');

      const jsonData = await response.json();

      setData(jsonData);

    } catch (error) {

      console.error(error);

    } finally {

      setLoading(false);

    }

  };
fetchData();

}, []);
if (loading) {

  return
Loading...
;

}
return (

    {/* Render your data here */}

);

In this solution, we introduce a new state variable called loading which is initially set to true. While the async operation is in progress, we display a loading message. Once the data is fetched and set in the state, we set loading to false and render the data.

Solution 2: Using a Ref

Another way to handle this issue is by using a ref to store the latest value of the state. Here’s an example:

const [data, setData] = useState(null); const dataRef = useRef(data);


useEffect(() => {

  const fetchData = async () => {

    try {

      const response = await fetch('https://api.example.com/data');

      const jsonData = await response.json();

      dataRef.current = jsonData;

      setData(jsonData);

    } catch (error) {

      console.error(error);

    }

  };
fetchData();

}, []);
// Access the latest value using dataRef.current
return (

    {/* Render your data here */}

);

In this solution, we create a ref called dataRef and initialize it with the initial value of the state. Inside the fetchData function, we update the ref with the latest value of the data. This way, even if the state value is not immediately updated, we can access the latest value using dataRef.current.

These are the two solutions to handle the issue of useState returning undefined with async/await syntax in React. Choose the solution that best fits your needs and enjoy coding with TypeScript!

React useState return undefined with async await