How to Handle States in React Class and Functional Components?

In this article, we will cover How to Handle States in React Class and Functional Components? as well as different approaches to it.

Before React 16.8, class and functional components did not have state or lifecycle hooks. With 16.8+, function components can now use hooks to use state and you can implement side-effects on the first render and after every update. To take a closer look at this, let’s see how a function and class component use state and fire. Functions on initial and subsequent renders by building a bare-bones To-Do List app — twice — once. As a class component and then again as a function component.

React components can possess an internal “state,” a set of key-value pairs which belong to the component. When the state changes, React re-renders the component. Historically, a state could only be use in class components. Using hooks, you can apply state to functional components too.

Setting up for Handle States in React

The first noticeable difference between class and function components is, of course, their syntax. A class component extends from React. Component and sets up a render function that returns a React component.

Handle States in React img-1

Whereas a function component is plain JavaScript that accepts props as an argument and returns a React component.

Handle States in React img-2

Initializing state to Handle States in React

Our state is a JavaScript object containing data that can be bound to the output of the render function. Whenever a state property is update, React re-renders the component accordingly. In class components, there are two ways to initialize state — in a constructor function or as a Class property.

Constructor functions, introduced in ES6, are the first function called in a class when it is first instantiated meaning when a new object is created from the class. Initializing the state within the constructor function allows the state object to be create before React renders the component.

Handle States in React img-3

With React 16.8, function components can now use state. Before this, data from the state had to be passed down as props from class components to function components or you had to convert your function component to a class component. Now, we can use React hooks, and to use state we can use the useState hook. You declare a state variable along with a set state variable by using array destructuring instead of declaring the state as an object and setting as many properties as you need all at once.

Handle States in React img-4

Render components

Great, now that we have our state initialized, let’s render our components. I’m going to count +1 on every click. So, let’s add a button by clicking on that button we increment our counter and set a new state in the existing state value.

Class component

img-5

So basically, what we did we create an H2 tag where your state will be rendered and create a button by clicking, we update our state. In our button element, we passed an onClick event and in this event, we define a call back function where we use a method setState. This is a build-in method in-class component and set our state of count to count +1.

Function component

In the functional component, we can achieve this thing by adding a hook useState().

img-6

We also define an h2 and button element in this component as class components but what we are doing there we update our state using react hooks. When our state changes the render method called and update our state. So, we created a counter using state in react.

The Traditional Approach

React class components have a state property that holds their state. They provide a setState() method you can use to update the state, triggering a re-render.

That’s all for this article if you have any confusion contact us through our website or email us at [email protected]

Leave a Comment