DEV Community: Cobbygraves

componentWillUnmount lifecycle method

Cobbygraves — Tue, 22 Mar 2022 03:21:52 +0000

This is part III of the tutorial series Class Component Vs Functional Component(Lifecycle Methods). To implement the componentWillUnmount lifecycle method in a class-based component, let consider the code snippet below:

Likewise, to implement the same code in a functional component let’s consider the code snippet below:

Now, analyzing the two code snippet we can conclude that for the class-based component, the componentWillUnmount function is defined in the class.
On the other hand, to implement the same code in a functional component, we have to return an anonymous function inside the useEffect hook. Inside the return function, we write the code for the clean-up.
Concluding this series, these methods are used to run side effects in a component lifecycle and must be used when it is necessary.

componentDidUpdate lifecyle method

Cobbygraves — Tue, 22 Mar 2022 03:01:30 +0000

This is part II of my tutorial series Class Component Vs Functional Component(Lifecycle Methods). If you haven’t already read part I, you can do so to get a better understanding of this tutorial series going forward.
To implement componentDidUpdate in a class-based component let’s consider the code snippet below:

To implement the same code in a functional component let consider the code snippet below:

Now, let’s discuss the two code snippet above and see how the componentDidUpdate lifecycle method is implemented in each of them.
Looking at the class-based component, the componentDidUpdate method was defined inside the class component as the way of implementation.
On the other hand, if we look at the functional-based component, the useEffect hook was used to implement the componentDidUpdate.
NB: The useEffect hook takes an optional array of dependencies. Whenever the useEffect hook is configured to have an array of dependencies, it is equivalent to the componentDidUpdate function in the class-based component.
Therefore anytime any of the values in the dependency array changes, the component has to re-render to update the DOM

Demystifying Props in React Components

Cobbygraves — Fri, 28 Jan 2022 02:56:00 +0000

This tutorial aims at two things about props.

The purpose of props in react component
How to use props in react component

First of all let understand the purpose of props in react components. Basically, props is a way of passing data from parent component to child component in a react application.

I believe that's simple and easy to understand and achieve since react is a one-way data flow library. ie. data is passed from parent to child.

Now, how do we pass data from child to parent in a react application if the need arises. The answer to the question above is simple, props.

To better understand my answer, let look at a scenario using the code below.

child component

parent component

Now if we consider the two component above, how do we then show the age of the child component inside the parent component ?.
This is what I mean by my previous question ie. How do we pass data from the child component to the parent component ?

The answer still remains as before ie. props. Let see how to accomplish that in our previous code examples.

child component

parent component

Comparing the parent and child component, we can conclude that, to pass the age value from the child component to the parent component, react makes use of what I termed as "functional
props". This simply means a prop which is a function.

The age from the child component must be passed as an argument to the functional prop inside of the child component. This is what is happening in the child component with respect to the showAge functional prop.

As the age which is a state in the child component is passed as an argument to the showAge prop, it is then received inside the parent component through a function and then displayed in it JSX below.

I hope you learn a lot about props and how data is passed from parent to child and vice versa in react component

Class Component Vs Functional Component(Lifecycle Methods)

Cobbygraves — Fri, 28 Jan 2022 02:20:28 +0000

Before we begin I want to say that this is a three part series tutorial

Part 1 - ComponentDidMount
Part 2 - ComponentDidUpdate
part 3 - ComponentWillUnmount

Let me begin by saying that prior to react 16.8 class based component were the defector standard to implement the lifecycle methods in a react component.
The lifecycle methods were as follows;

componentDidMount

componentDidUpdate

componentWillUmount

The componentDidMount method is called when the component is mounted to the DOM. The componentDidUpdate method is called anytime the component receives an update to any of it props or state. This update causes the component to re-render to display it current state of the UI. The componentWillUnmount is called when the react component is about to be removed from the DOM

React hooks were introduced in functional components which made it possible to implement the lifecycle methods in a react component using the useEffect hook.

Now, let look at how to implement the lifecycle methods in both functional and class based component.
Let consider the class based component and functional component respectively.

class based component

functional based component

To implement componentDidMount in a class based component let consider the code snippet below:

To implement the same code in a functional component let consider the code snippet below:

Let discuss the two code snippet above and see how the componentDidMount lifecycle method was implemented in each of them.

If we look at the class based component, the componentDidMount method was just defined inside the class based component to implement it. On the other hand if we look at the function based component the useEffect hook was used to implement the componentDidMount. Remember that the useEffect hook takes an optional array of dependencies. In the functional component the array of dependencies was left empty.

The useEffect hook can be configured to have different effect in a functional component.

NB: Whenever the useEffect hook is configured to have an empty array of dependencies, it is equivalent to the componentDidMount function in a class based component.

I hope you found value in this tutorial on the first part of the series of the lifecycle methods in react components. Please don't forget to read the other two part of the tutorial for a better understanding of this concept.