How to Use async/await in React Render Functions

In React, the render function is typically intended for pure, synchronous operations. However, in certain scenarios, you may encounter the need to perform asynchronous tasks within this function. This article will address how to effectively use the async/await syntax in the render function.

Understanding the Issue

As the question highlights, attempting to use async/await directly within the map function in the render function can result in unexpected behavior. This is because the map function expects synchronous operations, and attempting to perform asynchronous calls within it can disrupt the flow of the rendering process.

Separating Data Fetching from Displaying

To resolve this issue, it's recommended to separate the data fetching process from the display logic. Instead of performing asynchronous operations within the render function, it's more appropriate to initiate the data fetching in a separate component or hook.

Asynchronous Data Fetching in Parent Component

In this approach, you create a parent component (e.g., ParentThatFetches) responsible for making asynchronous requests and managing the data. Utilizing the lifecycle methods or hooks, the parent component fetches the data and stores it in the state. Subsequently, the parent component conditionally renders a pure functional child component (e.g., Child) that receives the fetched data as props.

class ParentThatFetches extends React.Component {
constructor () {

this.state = {};

}

componentDidMount () {

fetch('/some/async/data')
  .then(resp => resp.json())
  .then(data => this.setState({data}));

}

render () {

{this.state.data && (
  <Child data={this.state.data} />
)}

}
}

const Child = ({ data }) => (

{data.map((x, i) => (<td key={i}>{x}</td>))}

Fetching Data Using Hooks

With the advent of hooks in React, data fetching can be simplified further. The following code snippet demonstrates how to use hooks to fetch data asynchronously and update the state accordingly:

const ParentThatFetches = () => {
const [data, updateData] = useState();
useEffect(() => {

const getData = async () => {
  const resp = await fetch('some/url');
  const json = await resp.json()
  updateData(json);
}
getData();

}, []);

return data &&
}