Async function doesn't return in React app [duplicate]

Question

I have an async function in a file (someFile.js) in my React app and I want the returned string from that function (someFunction) to be inserted in the webpage when it's finished. The problem is with the code below, I think the webpage loads before the promise is resolved, so the webpage appears blank. Can someone help me and see if there's a problem with my code below? The code below works when someFunction isn't an async function.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import reportWebVitals from './reportWebVitals.js';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js

import Header from "./components/Header.js";

function App() {
    return (
        <div className="container">
            <Header />
        </div>
    );
}

export default App;

Header.js

import someFunction from "./someFile.js";

const Header = () => {
    let text = someFunction();
    return (<h1>{text}</h1>)
}

export default Header;

someFile.js

const someFunction = async () => {
    let x = await someAsyncFunc();
    return x; //x is a string
}

export default someFunction;

Does this answer your question? How to async await in react render function? Hint: use useEffect to render the result of an async function. — Wyck
– Wyck, Commented Apr 26, 2022 at 20:30

Inder · Accepted Answer · 2022-04-26 20:19:46Z

0

Inside Header.js

import {useEffect,useState} from "react";
import someFunction from "./someFile.js";

const Header = () => {
      const [text, setText] = useState("");

  useEffect(() => {
    someFunction()
      .then((data) => setText(data))
      .catch((err) => console.log(err));
  }, []);

    return (<h1>{text}</h1>)
}

export default Header;

answered Apr 26, 2022 at 20:19

Inder

2,1442 gold badges10 silver badges22 bronze badges

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

Comments

Guilhermo Masid · Accepted Answer · 2022-04-26 20:38:45Z

0

Remember the concept of immutability in React.js, you should do something like this:

  import someFunction from "./someFile.js";

 import { useState, useEffect, useCallback } from ‘react’;

 const Header = () => {
   const [text, setText] = useState(‘’);

   const getApiText = useCallback(async () => {
     let apiReturnText = await someFunction();
     setText(apiReturnText);
   }, [])

    useEffect(() => {
      getApiText(); 
    }, [getApiText])

    return (<h1>{text}</h1>)
}

export default Header;

edited Apr 26, 2022 at 20:38

answered Apr 26, 2022 at 20:20

Guilhermo Masid

864 bronze badges

2 Comments

Robin Zigmond Over a year ago

this code won't work well either, because getApiText is redefined on each render so the useEffect will be called on each render too - hence continually. Either make the dependency array of the useEffect empty (if you don't mind linter warnings about missing dependencies) or better, wrap getApiText in useCallback so it doesn't change.

Guilhermo Masid Over a year ago

You're right Robin, i thought useCallback is going to make things a little bit hard to understand, but i forgot the problem that you bring, thanks for pointing that! I've already fix

Collectives™ on Stack Overflow

Async function doesn't return in React app [duplicate]

index.js

App.js

Header.js

someFile.js

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

index.js

App.js

Header.js

someFile.js

2 Answers 2

Comments

2 Comments

Linked

Related