Introduction to React and React Life Cycle Methods

So starting this article, I think that everyone has prior knowledge of react and is quite familiar with function and class components. So what is react? the answer is, React is a javascript library that is used to build complex user interfaces, you all will be thinking that how this definition is very simple and React is just a javascript library, but I tell you it is, so how can we build complex user interfaces then? So for building complex user interfaces you have to install dev dependencies, react does not provide everything by itself you have to install features in it and it allows you to install and you can use it any number of times. While working on my company I have installed a multiple dependencies like ES lint, Husky, React Date Picker, React Mentions, React Debounce Input, React Charts, and most important the material UI, it’s very very important for a front-end developer if you want to build interactive UI with minimum efforts. The most essential thing which React’s provides us to write code in JSX ( javascript extension) what does it mean? it means you can write Java script with html, You all will be thinking that how it is possible, I was also amazed when I get to know this. let me show you an example:-

so by looking at this example hope you understood.

Now, I would like to tell you about class components, In react we have two types of components first one in class and the second one is function components, the class components are very use full as it provides us a certain feature like State Management, React side effects, Render methods. I should give you an example for this, 

here By looking at this example, we have a class component, In that we have a state whose value is “Siddhartha” and a render method, so what is this render method, everything you want to show on the screen you have to place in this render method. I will also show you how we can change the value of this state with a setter method 

So in this example, I have changed the value of a state variable with a set state method.

Now it’s time to introduce React Life cycle methods to you, the class components provide us with three life cycle methods first one is Component Did Mount, second is Component Did Update, and third is Component Did Unmount, with the help of these methods we render the UI according to our use, let me explain you one by one.

In component did mount, this method gets called when anything render’s on the screen, it’s an invoking function when anything renders it automatically get’s called.

so when the render method, renders the JSX on the screen. after rendering, the component did mount automatically get’s called and executes what’s inside it. here we have a console statement, so it will print the name to the console. 

The Second method is component did update, This method gets called automatically when there is a change in a state, so by looking at this example when the render method render’s the JSX, Component did mount gets called and in this, we have a setter method which change’s the current state to a new state and when new state gets changed component did update gets called and we have a console statement which got print in the console.

The Third Method is Component Did Unmount, In this method we actually remove the element from the document object model, We can do this by permanently removing the element or by conditionally rendering, so when anything gets removed from the Virtual Dom (document object model), the component did unmount() method gets called, I will show you one example, 

In the Above Example, When we click on a button the state get’s changed and the <h1> tag gets unmounted, and automatically component will unmount get’s called. 

The Need Of Hooks in react,
1. By using these life cycle methods of react, the code becomes bit complex as we have to write the same code in more than one method, so the react developers find a way of solving this by introducing hooks to react.

We have many hooks in React like useRef, useMemo, useCallback, useReducer, and useContext but we mostly use is useState and useEffect. The useState method is the same as the state method in class component only the way of writing it gets different, I will show you by example

so this is the way we change the state using state hook.

The useEffect Hook in react, this hook is a combination of component did mount, the component did update and the component will unmount, it performs all the functions in a combined form only we have to set some condition’s to it, let me show you by example

In this example, the use effect gets called when anything render’s on the screen and it gets called as many times as the screen renders.

here, In this hook, we have three things which I would like to tell you, we have three ways to use this hook. the first way is to use this hook with no dependency, in the above example, we have used it, by using this way as many times as the components get render, the useEffect function gets called, and if any state or prop changes, this function get called. 

The second way to use this function is with empty dependency, If you want to run this function only once at an initial render, write useEffect with empty dependency, let me show you an example.

In this example, on the initial render, the use effect function will get called and executes the console statement, if pressing the button, the state will get changed and now the component will re-render but the use effect function will not get called.

the third way to use this function is with some dependency, by this way the function gets called on the initial render and also anytime when that particular state gets changed. let me show you with example

In this example, useEffect function will get called on the initial render and when the state color will change.

So these are the life cycle methods in react, In class component we use componentDidMount(), componentDidUpdate(), and componentWillUnMount() and in function Component we use useEffect. 

So this is it, Thank you for giving me a chance to share my knowledge and please ignore the orange bottom border in JSX, it’s because of ES lint,(no error in this code) you can also use this code to practice.

Latest

SENTRY integration in your React Native App for Error/Crash tracking

Sentry captures data by using an SDK within your...

Recall the concepts of useCallback.

useCallback hook is one of the best hooks offered...

Value of Comments in the code!!

During my journey of Software Development, I am always...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million...

Featured

Developing Enterprise Application in Node.js – CJS Vs ESM

Node.js is a popular runtime environment for building server-side...

Integrating your web react applications with their React Native(android and IOS) apps using QR code

Integrating a web application with Android and iOS apps...

YOLO: Bullet Paced Algorithm – popular choice for object detection in autonomous vehicles 

According to world health organization, more than 1.35 million...

Importance of Test Scalar Tool

TestScalar is quick to access, convenient to execute, easy to track. Our popular web-based test planning software lets you focus on what matters: meeting...

From Requirements to Reporting: How to Use a Test Case Management Tool to Ace Your Software Testing

The Software Testing Life Cycle (STLC) is a process that describes the stages of testing software. It includes planning, design, execution, and reporting of...

YOLO:Bullet Paced Algorithm

http://sh017.hostgator.tempwebhost.net/media/33949d0e61af4b50f374c534713f56b3 According to world health organization, more than 1.35 million people die every year because of vehicle accidents . Vehicle safety features started with passive safety...

LEAVE A REPLY

Please enter your comment!
Please enter your name here