I am learning react and am working on the FCC Leaderboard project. My plan is to have a
DataTable component that will be stateful. This component will make the API call to get the FCC user / brownie points data (an array of objects).
My question is where within the component should I be making this API call? For this project I will only need to make the call once as once I have the data all I need to do is sort it and display it differently to the user.
My initial thought was to make the call in
componentWillMount() but it seems like this function executes before every
render() so I would be repeating API calls for no reason is this correct?
This blog post suggests making the API call in
componentDidMount() stating that:
This method will be executed when the component “mounts” (is added to the DOM) for the first time. This method is only executed once during the component’s life.
This sounds like what I want but what I am not understanding is how this only runs once. How is the component not remounted to the DOM every time
render() is called?
If anyone could shed some light on this I’d really appreciate it.