State in React Component

Before i delve into state in class component and functional component with examples, i would like to introduce what state is in react.

Introduction to State in React

State in react is simply an object or other data type which allows us to manage data dynamically within the component. When the state of the component changes, the component re-renders. State can be updated by setState method in class based component. Never ever directly update or mutate state in React. If you make a direct state change, your component will not be re-rendered. In react, there are mainly two ways of creating a component:

1. Class based component
2. Functional based component

It’s imperative to know how to work with class component and functional component. If you’re a beginner learning react, learn to know the basics of class based component before learning functional component.

Let’s get started with class based component.

State in class based component

You can create a component by using an ES6 class keyword and by extending the Component class provided by React like this:

Car.js file

Car.js file

Let me explain what we are doing here.

Inside the constructor function, we called super by passing props to it. Then we defined the state as an object with brand, model, color, ram, storage and year as properties of the object.

Inside the changeColor function, we’re updating only the color. To change a value in the state object, use the this.setState() method.

And inside the render method for the JSX, we added a button and onClick on that button called this.state.changeColor and for the inner text, we displayed the state property values and render on the UI.

Pretty straight forward. The three steps necessary to implement this state object are:

1. The first step is to create a component and i have used a class component.

2. The second step is to create a state variables initialized to Samsung, GTS3000, black, 4gb, 128gb and 2019.

3. The last step is to create a method that is capable of setting the state value.

Note: Always use the setState() method to change the state object in class component. It will ensure that the component knows its been updated and calls the render() method.

State in functional component

Prior to hooks, if you started writing a functional component and then run into a situation where you needed to add state, you would have to convert the functional component to a class component. The reason for the conversion of functional component to class component is simply because, state could only be used in class component. With the introduction of hooks in react 16.8, the state hook which we will learn in this article allows us to use state within functional component.

You can create a functional component in React like this:

Counter.js file

The three steps necessary to implement the counter in this example:

1. The first step is to create a component and i have used a functional component.

2. The second step is to create a state property initialized to zero

3. The third step is to create a method capable of setting that state property value.

Since we are working with a functional component, we cannot use state like we did in class component. We need a different way to implement steps two and three. That’s where useState hook comes into picture. A hook is just a special function that lets you hook into React features. useState is a hook that lets you add React state to functional component.

let’s take a look at the code

We begin by importing it from React “{ useState }”. Hooks are functions so we simply call useState(). UseState() accepts an argument which is the initial value of the state property and returns the current value of the state property and a method that is capable of updating that state property. Here, useState accept the initial value of the state variable which is zero and returns a pair of values. Current value of the state variable called count and a method that can update the state variable called setCount “const[count, setCount] = useState(0)”. This syntax is called array destructuring which is a feature in ES6. I chose to name the state variable count and setCount. You can name the state variable whatever you like. We created handleCount function and called setCount passing in the new count value and the new count value is current count plus one “ setCount(count + 1) “. We can now use these variables in the JSX. The inner text count is what we want to render and onClick will call handleCount. That’s it.

There are two important rules you must follow when using Hooks:

1. Only call Hooks at the top level: Don’t call Hooks inside loops, conditions, or nested functions.
2. Only call Hooks from React Functions: Call them from within React functional components and not just any regular JavaScript function.

Thank You All For Reading This Article!!

Your feedback is most welcome.