State Management in React

Introduction


In React, state management is the crucial topic and without this topic , react cannot re-render or revaluate the components. React is all about the state management , we can do the state management in react with React Hooks and Redux.

Why State Management?

Once , you initialize the react app and run on the browser it will render all the html , components in the react and the sub components only in single page. React doesn't reload when variable initialize again or when some datatype changes with some result also not in  conditional statements  neither in loop statements. React renders all the code only for once, and for this need to not reload the page again when some variable changes , it only changes that block of statement or component whenever the state changes.

State management can be done with useState , useContext , useReducer and with Redux library for advance state management. But in this article we'll only discuss about the useState hook deeply and understand it better.

What is UseState Hook?

React allows the re-rendering and re-evaluating the component in the functional component with the useState hook .
Previously , when working with classes we cannot use hooks for the state management and functional components are called as stateless components. State management can only be done in class components but with the React 16.8 version or higher , we can use hooks and make the functional components to be stateful components

UseState hook are used for the state management and it re-renders and re-evaluated the component whenever the state changes. Let's see how to do the state management in react with the useState hook.

How UseState Hook?

First,  we need to create the react app and  namely import the useState hook from the react library. Because React library is responsible for component updates and state management in react.
























UseState hook in react has two values , first is current value of state and second is setter function , which will be used to update the state in the component.
Use state hook is the function from where we can set the default value of our state.















In this example , the count and set count are the values of the useState whose default value is 0 where the count will store the current value and setCount will update the state , so the whole component re-runs again and the state changes.
Whenever the button is clicked the setter function will be called and the count value shows in the web browser in the h1 tag.

This is the basic example of useState hook where we have update the state and our count value changes . In the next blog we will see the useState hook with object and later in useState hook in array.

I will share the code sandbox link , so you can practice and play with the code!
https://codesandbox.io/s/compassionate-dust-njnj63?file=/src/App.js

Thank you for reading the blog post!

Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more