ReactJS is a popular JavaScript library that allows developers to build fast and dynamic user interfaces. One of the fundamental concepts in ReactJS is state, which enables components to keep track of and manage changes in their data over time. In this blog, we will explore what state is in ReactJS and how it is used.
State is an object that holds information about a component’s current status, including any data that changes over time. When the state of a component changes, ReactJS automatically re-renders the component, updating the user interface to reflect the new state. This makes it possible to build interactive applications that respond to user input, without requiring a page refresh.
To define state in a React component, you use the useState hook, which is a built-in function that returns an array of two values: the current state value and a function to update the state.
There are Class components and Hooks so in both we can create the State in a different way.
1. State in Class Component
Class components are a traditional way of defining components in ReactJS. In class components, state is defined in the constructor function, and it can be updated using the setState method. The setState the method is a built-in function in ReactJS that allows you to update the state of a component.
Here is an example of a simple counter component defined using a class component:
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={this.handleClick}>
Click me
</button>
</div>
);
}
}
In this example, we define a Counter component that initializes a count state variable with a value of 0 in the constructor function. We then define a handleClick method that updates the count state variable using the setState method. Finally, we render a p element that displays the current value of count and a button element that, when clicked, calls the handleClick method to update the count state variable.
When the user clicks the button, ReactJS re-renders the Counter component, updating the value of count in the user interface. This happens without a page refresh, making the application feel more responsive and interactive.
Updating State in Class Components
In class components, state can be updated using the setState method. When setState is called, ReactJS merges the new state with the existing state, triggering a re-render of the component with the updated state.
Here is an example of a handleClick method that updates multiple state variables:
handleClick = () => {
this.setState({
count: this.state.count + 1,
message: "You clicked the button!",
});
}
In this example, we update two state variables, count and message, using the setState method. When setState is called, ReactJS merges the new state with the existing state, triggering a re-render of the component with the updated state.
Class Components vs Functional Components Class components are a traditional way of defining components in ReactJS. However, with the introduction of Hooks in ReactJS 16.8, functional components can now also use state using the useState hook.
Functional components are simpler and easier to read than class components, and they are also faster and more lightweight. Functional components are also the preferred way of defining components in ReactJS, and they are recommended for most use cases.
Here is an example of a simple counter component defined using a functional component and the useState hook:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click me
</button>
</div>
);
}
2. State in Hooks
Functional components are a simpler and more lightweight way of defining components in ReactJS. With the introduction of Hooks in ReactJS 16.8, functional components can now also use state using the useState hook. The useState hook is a built-in function in ReactJS that allows you to define state in functional components.
Here is an example of a simple counter component defined using a functional component and the useState hook:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>
Click me
</button>
</div>
);
}
In this example, we define a Counter the component that uses the useState hook to define a count state variable with a value of 0. We then define a handleClick a function that updates the count state variable using the setCount function, which is provided by the useState hook.
When the user clicks the button, ReactJS re-renders the Counter component, updating the value of count in the user interface. This happens without a page refresh, making the application feel more responsive and interactive.
In functional components with Hooks, state can be updated using the set function provided by the useState hook. When the set function is called, ReactJS updates the state and triggers a re-render of the component with the updated state.
Here is an example of a handleClick a function that updates multiple state variables:
const [count, setCount] = useState(0);
const [message, setMessage] = useState("");
const handleClick = () => {
setCount(count + 1);
setMessage("You clicked the button!");
}
In this example, we define two state variables, count and message, using the useState hook. We then define a handleClick method that updates both state variables using the setCount and setMessage functions. When setCount and setMessage are called, ReactJS updates the state variables and triggers a re-render of the component with the updated state.
Hooks vs Class Components Class components are a traditional way of defining components in ReactJS. However, with the introduction of Hooks in ReactJS 16.8, functional components can now also use state using the useState hook.
Functional components are simpler and easier to read than class components, and they are also faster and more lightweight. Functional components are also the preferred way of defining components in ReactJS, and they are recommended for most use cases.