- Worked from 3:43am - 4am
- Made it through Lesson 4
Lesson 4: Rendering UI with External Data
Nothing special in this lesson. It took about 40 minutes to complete. It introduced React’s Lifecycle Events.
These are special methods each React component has that allows us to tap into different points in its life to manipulate state. We can breakdown these methods into three different points:
- Adding to the DOM
- Re-rendering the DOM
- Removing from the DOM
Is it obvious that I’m a visual learner? 😝
The most commonly used lifecycle event is the
componentDidMount() method. This method runs immediately after the components is added to the DOM. So, this would be a great place to make AJAX calls, i.e. retrieving data from our backend server. However, be careful calling
setState() in this method! Setting state will cause the component to re-rendering. This might throw you into a loop!
I use the
componentDidMount() method a lot! Probably, the majority of time I need to manipulate my component state. Now that I’m aware of all these other lifecycle events and their purpose, I can use them properly in my projects.