Intro to React Lifecycle Hooks

This post is a simple introduction to the concept of lifecycle hooks in React! The focus here will be on what lifecycle hooks are and what they do. If you are already familiar with the topic, then you won't get much out of this. But, if you are a beginner, this post will help you understand what you might use lifecycle hooks for.

Lifecycle

Lifecycle simply refers to how long a React component exists in the DOM. If you're unfamiliar with the basics of React components: https://reactjs.org/docs/react-component.html
Otherwise, I'll assume you understand the basics but want to know a little bit more....

After a component is created and inserted into the DOM, if it is at some point removed, then it is destroyed. This action ends its lifecycle. So, lifecycle simply refers to the rendering, re-rendering(however many times it happens) and eventual removal and deletion of a component.

Hooks

A hook is a function/method/action that you can attach to a specific action/moment. The idea of a hook isn't unique to React. They're a concept that is widely used in coding. Basically the idea is that if something happens, you can attach some code to it. Example: If a component is rendered for the first time then do.....something().

Some Basic React Lifecycle Hooks

1. componentDidMount()
   This hook lets you attach functionality to a component that has been mounted to the DOM. It's a good place in the lifecycle to make external requests for data that in turn update the component's state. In other words, sometimes you have components that need data that may take time to get. If the entire page is dependent on that data being loaded, everything will be paused until it happens. This hook allows you to do something like load static data and then update the component once the external data becomes available.
   If you use gmail, you may be able to see something like this happening when your inbox loads. The inbox info will load, but the hangouts section in the bottom left corner will take a moment to populate...The element for hangouts exists, but it's blank, until the data has been gathered.

2. componentDidUpdate()
   If a component is ever updated, this hook allows you to activate functions that will respond accordingly. If a components props or state changes then you can use componentDidUpdate to make changes at that moment.

3. componentWillUnmount()
   This allows you to attach functions to a component at the time of its removal from the DOM. Suppose that a component is dependent on a background process in order to function correctly, like a clock being displayed. If that component's lifecycle ends, the process will remain running in the background. In this example, componentWillUnmount would allow you to attach code to the clock component to end the clock background process.

Conclusion

That's all for my intro to lifecycle hooks! There are more hooks that can be used to increase the functionality/efficiency of your webpage/webapp, but these are a good place to start in order to start understanding the concept.!