State Management in React

Hooks were added to React in version 16.8. Hooks allow function components to have access to state and other React features Because of this, class components are generally no longer needed.
State management in React refers to the management of the data that is specific to a component or a group of components within a React application. In React, components can have their internal state, which represents their data and controls their behavior. In summary, State represents the part of a component that is variable depending on the user's action, I will explore a basic concept as an example to facilitate the understanding of what state management is.

However, bear in mind that as an application grows, managing the state can become complex, especially when you have multiple components that need to share and synchronize data.

There are several approaches to state management in React but we will use a simplified approach to enable us to grasp what this does, so follow along I am confident by the end of this article we would have achieved the intended objective.

let's set up functional component

import React from 'react';

function Counts() {
    return (
        <div>

        </div>
    );
}

export default Counts;

the idea is to create two buttons that increment and decrement when clicked, where the current state will be set at 0.

let's import this {Usestate} hook to our react project

import React from 'react';
import { useState } from 'react';

function Counts() {
    return (
        <div>

        </div>
    );
}

export default Counts;

create two buttons and a span tags within our divs

   <div>
        <button>-</button>
        <span></span>
        <button>+</button>
   </div>

let's get to writing the state, we will create a destructured array that will have a current state and an updated state

const [state, updatedState] = useState(0);
const [count, setCount] = useState(0);
const [current, updated] = useState(0);

in the above code, I have 3 examples that portray what a destructured array in the state looks like, we can, however, point out that the first set of arrays is the initial state of the component, and the second thus depends on what the user's action could be, so for this, we will be using the count and set count as it's has a unique name to what we are working on.

Moving forward,

our code base should look below

import React from 'react';
import { useState } from 'react';

function Counts() {
   const [count, setCount] = useState(0);

    return (
        <div>
            <button>-</button>
            <span></span>
            <button>+</button>
        </div>
    );
}

export default Counts;

awesome, in the above code we've been able to initialize our default state to be 0, now let's render this state in our span

<span>{count}</span>

from the UI, we should be able to see the initial state sets to zero(0), also. let's set our onClick events {increment} and {decrement} to the buttons respectively;

   <button onClick={decrement}>-</button>
   <button onClick={increment}>+</button>

create a function that updates the current state to a user's defined action of increment and decrement

function decrement(){
setCount(prevCount => prevCount - 1)
}

function increment(){
setCount(prevCount => prevCount + 1)
}

The actions however have been implemented on these buttons when the event is clicked.

I hope this helps a little to understand what state management is in react project as this is an important hooks in building an application with react.

This is the final code

import React from 'react';
import { useState } from 'react';

function State() {
   const [count, setCount] = useState(0);

   function decrement(){
    setCount(prevCount => prevCount - 1);
   }
   function increment(){
    setCount(prevCount => prevCount + 1);
   }

    return (
        <div>
            <button onClick={decrement}>-</button>
            <span>{count}</span>
            <button onClick={increment}>+</button>
        </div>
    );
}

export default State;

May the force be with you...