React Review: Component Lifecycle and Communication

I’ve been brushing up on my react and this is something that I never really understood about React and what it was for. Recently, I did some reading and studying to better understand these concepts in React.

What is Component Lifecycle?

Each component goes through a lifecycle Mounting, Updating, and Unmounting.

For example, let’s say we have an application and we want to add a new post to. By creating a new post we are Mounting and new component post will appear. During this time the component will receive props like let’s say your image if you added one and the text you’ve added.

There’s some default behavior that happens with each part of this lifecycle and if you needed something specific then you can use Lifecycle methods. The most common one is if the componentDidMount() , where the use case for this is commonly used for APIs and you need to fetch data. If we needed to fetch data at an interval of every 5 seconds we could add that under the lifecycle method.

Within the Lifecycles there are many methods that you can use, but as a general advice its best to only use them for a desired behavior. Otherwise adding these add complexity to your application and can be difficult to debug later.

Check out this React Diagram for more information! https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

What is Component Communication?

This concept is actually fairly simple and basically it just a way to provide data from a Parent component to a Child component. It’s not a prop since you will need the Child component to set up for this using the useContext.

As with most global code patterns, use context sparingly. It couples components that can lead to less-reusable code or relationships that are less clear.