The best practice with React is to place API calls or any calls to your server in the lifecycle method
componentDidMount(). This method is called after a component is mounted to the DOM. Any calls tosetState()here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.Below is a mock API call in
componentDidMount(). It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total actives users for a site. In the render method, render the value ofactiveUsersin theh1after the textActive Users:.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
activeUsers: 1273
});
}, 2500);
}
render() {
return (
<div>
{/* Change code below this line */}
<h1>Active Users: </h1>
{/* Change code above this line */}
</div>
);
}
}
- Answer:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
activeUsers: null
};
}
componentDidMount() {
setTimeout(() => {
this.setState({
activeUsers: 2324
});
},1500);
}
render() {
return (
<div>
<h1>Active Users: {this.state.activeUsers} </h1>
</div>
);
}
}
Top comments (0)