React Hooks vs Class Components
In today’s world React has become one of the most popular libraries used by web developers, primarily front end web developers, around the globe. The main reason why it is so preferred is because of its speed and simplicity to reuse code using virtual DOM and components respectively. This post is intended to find out the pros and cons of the topic that revolves around the most fundamental topic of React- STATES!
What is the difference and which one should we select? Before deep diving into the comparison we would first try to understand what are states and how are they used in React, and later we would talk about Hooks and Classes.
How to create a React application?
npx create-react-app myfirstreact
Here npx create-react-app is the basic syntax and myfirstreact is the name of your app(directory).
In the above directory, Counter_Hooks.js and Counter_State.js are 2 files inside the src folder in which we would be implementing the 2 comparisons.
What is state in React?
In simple terms, a state is simply an item that contains all of your key value values. The state basically determines how the rendering of components happen and how they behave. One major use of state is that it helps your website to be more dynamic and makes it easier to interact with variables inside the app. One thing that becomes a point of confusion for many is the difference between state and props. Props is something that is passed inside a component and is used by fellow components in the react app. On the contrary state is something that is managed inside the component and something that is prone to changes.
How are states managed in Class Component?
Class components are the default method for the managing of local state in React, but they also lead to side effects and complexity when Life cycle methods come into existence. In order to access and manage state in a class, you have to initialize this.state as an object within your constructor() The main problem with class state is deep nested components.
setState() is what one would use in order to manipulate the state initiated at any point of time. It is anyhow recommended to always use setState() when you have to modify your state.
This is how state is declared in classes-
Incase if you have problem with the “super” keyword, just type in the terminal npm install — dev @types/react. Too much of theory! Let’s have a look at an application of class states. Let us implement a simple counter using states.
For a class component to use state you need a small pre defined code that has a constructor and super function in it. If we use an event handler called OnClick inside the button(<button type=”button” onClick={this.setState({count:this.state.count+1}>+</button>), the state is captured by react and the current value of state is altered by using the previous set value of the state. The new value of state would be one more than the previous value.
This is the code in the Counter_State.js file-
How React Hooks manage state in React?
The major difference between Hooks and class-based state is that hooks are used inside of the functional component. One thing to keep in mind is that never call hooks inside of a any logic, it should always be on the top level!
useState() is a hook that allows you to play with state in functional components in react. In order to do a fair comparison let us take the same counter example and see how it is any different from the above implementation.
This is how state is declared in functional component using Hooks:-
The way how state is declared in Hooks is const[count, setCount]=useState(0).
This is the basic syntax for Hooks. The first element is the state name and the second variable is a function, analogous to setState() in class based state, that is used to change the state value. The value inside the useState is initial value of the state (count in this case). useState() returns a pair of values in an array, the current state and a function that updates it.
The onClick function can be implemented as — <button onClick={() => setCount(count + 1)}>Click me</button>.
This is how the Counter_Hooks.js file would look like-
Now lets see how to bring these 2 counters on the main screen!
Now get into the App.js and import these 2 files in it. The App.js looks like-
How would the output look like?
In both the cases the output remains the same ( at least the frontend part). Only the method of implementation of states is different.
In order to run the application, open the terminal and move into your react directory using cd command and type in the terminal/command prompt — npm start (Your application will start to run on localhost:3000 by default and you would be directed to see this on the screen)
Conclusion
Even though React Hooks helped us solve many number of problems, there are still many reasons why one would still prefer class-based states due to the lifecycle methods. There is no hard and fast rule that you should be using Hooks only, but it depends on the individuals convenience and priority.
This article is just to tell you that there are different options that could be explored! Just keep experimenting!
Happy Coding!
-Samarth Nehe
