State in ReactJS

State in ReactJS

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time.

The State of a component is an object that holds some information that may change over the lifetime of the component. Let's understand the concept with an example of our daily life. Let’s say there is a bulb that is turned off. When I turn the switch on, the bulb turns on. So basically, the bulb has 2 states, on and off. When an action is performed i.e.(turning the switch on here is an action) the state changed from off to on. See the below image so that you can understand the basic concept.

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system events. A component with the state is known as** stateful components or class components**.

Refer here for class and functional-based components.

Handling state

Handling state was only possible in a class component until React 16.8 was released. But when React Hooks(useState) was introduced, it allows developers to write stateful functional components. Hook in complete detail we will study later on.

reactjs react-for-beginner manage-state-in-react react-course javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Why ReactJS?

React JS is the most popular JS library for building UI (User Interfaces), which is created by Facebook. We can build fast Single Page, modern Applications, or websites with React. So, the question here arises is why React is so important. Let's put some light on the features of react.

The Boring React State Management Guide

What is State? I’ll like to talk about how to understand state in a way that helps you make more informed decisions about managing it.

React State Management: Class vs Hooks Components

In React, state is the relationship between data, rules you’ve given to the app, and what shows on the page. It can be broken down into five categories: model state, view/UI state, session, communication and location state.

Two Ways of Managing State in a Functional React Form

In a registration form, using useState hooks for each input versus using a user object and a single useState hook. In this article we will explore two ways of tracking state using a simple registration form.