Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Async data will not render

See original GitHub issue


Great package btw! I’m having some issues with rendering when it comes to async data.

I’m trying to render the following:

const InfoDisplay = () => {
  const [data, setData] = useState({});

  useEffect(() => {
    async function fetchInfo() {
      const result = await axios
        .then((resp) =>
        .catch((err) => [{
          error: err.response,


  }, []);
  return (
          Object.keys(data).map((index) => {
            return <InfoDisplayItem key={index} data={data[index]} />
      </TextLoop>{" "}

But nothing shows. However when I either remove the <TextLoop><TextLoop> or just use some of the examples given in the README I see stuff rendering. Any ideas why async data won’t render?

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

emilnewelcommented, Apr 24, 2020

Thanks @exsesx !

This worked perfectly. 😄

braposocommented, Apr 24, 2020

Thanks for replying @exsesx! I haven’t had the chance to look into this yet @emilnewel, I’ll probably do that over the weekend but for now you can use what @exsesx is suggesting.

This seems to be related with how the new child elements are added to the component but can’t know for sure without digging in the code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React not rendering element if async call for data takes too long
I'm grabbing user data from an API. The API call takes a while. But even when the frontend gets the response, React never...
Read more >
How To Handle Async Data Loading, Lazy Loading, and Code ...
Notice that the component renders before the data is loaded. The advantage with asynchronous code is that it won't block the initial render....
Read more >
Async waits in React Testing Library -
We receive and render the asynchronous data. We display an error message when data could not be fetched. The loading text initially appears ......
Read more >
Data Fetching - Nuxt
asyncData is only available for pages and you don't have access to this inside the hook. ... Unlike fetch , the promise returned...
Read more >
Update on Async Rendering – React Blog
In practice this was never true because React has always executed render immediately after componentWillMount . If the data is not available by ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found