Render React component asynchronously (wait for data to be returned)

Question

I have the following ReactJS component:

import React, {useState} from 'react';
import Plot from 'react-plotly.js';

import {utility} from "./utility";

function Chart() {
    
    const [use_data, setData] = useState([]);

    const handleClick = () => {
        const newData = {
            x: ['giraffes', 'orangutans', 'monkeys'],
            y: [20, 14, 23],
            type: 'bar'
        }
        setData((use_data) => [...use_data, newData]);
    };

    return (
        <>
        <button onClick={handleClick}>GO</button>
        <Plot
            var data = {use_data}
            var layout={ {width: 1000, height: 400, title: "Top 100 Topics"} }
        />
        </>
    );

}

export default Chart;

It updates the hardcoded data to produce the following chart on button click:

Obviously I need to fetch my own data rather than hardcode it as above. In my utilites.js I produce data with the same structure shown above (newData), however it takes about a second to return this data. Thus, React does not render the visual.

ReactJS is obviously looking for some kind of asynchronous state management in order to render this visual (render once data are returned).

const handleClick = () => {
    const newData = utilities.fetch_data()
    setData((use_data) => [...use_data, newData]);
};

How can my above code be changed to allow for asynchonous rendering. Is this where a hook is needed to implement something similar to componentDidMount but for functional components?

Does this answer your question? How to async await in react render function? — Jared Smith
– Jared Smith, Commented Feb 21, 2021 at 1:58

Parsa VxT · Accepted Answer · 2021-02-21 01:53:20Z

2

If I understand the problem correctly, you should use Promise when fetching data, after that, you need a utility to format the response something like the following example:

const formatter = (statics) => {
  const tmp = statics.map((static) => {name: static.name, .......});

  return tmp;
};

function App() {
  const [state, setState] = React.useState(null);

  React.useEffect(() => {
    fetch('https://blahblahblah.com')
      .then((res) => res.json())
      .then((response) => {
        return formatter(response.data.statics);
      })
      .then((formatedData) => setState(formatedData));
  }, []);

  return <h1>{state ? JSON.stringify(state) : "wait..."}</h1>;
}

answered Feb 21, 2021 at 1:53

Parsa VxT

1,1197 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Render React component asynchronously (wait for data to be returned)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related