Manage state in React applications

React JS State serves as a mechanism for storing and managing information or data during the development of a React application.

State management in React apps entails handling data that changes over time and influences the component's rendering.

 

In React Applications State can be Local Or Global

• Local State: Managed via useState Hook. 
• Global State: Managed using Context API or state management libraries like Redux or MobX

Manage states with Hooks 

In React 16.8, hooks introduced functional components by managing state and lifecycle aspects. 

• The useState hook makes state management easy. It lets us create and alter state variables in components without class components. 

const [state, setState] = useState(<default value>);

import React, { useState } from 'react';function App() {
   const [click, setClick] = useState(0);
   return (
       <div>
           <p>You've clicked {click} times!</p>

           <p>The number of times you have clicked 
               is {click % 2 == 0 ? 'even!' : 'odd!'}</p>

           <button onClick={() => setClick(click => click + 1)}>
               Click me
           </button>
       </div>
   );
}

export default App;

• The useReducer hook: is better than the useState hook
  • When you have sophisticated state-building logic, 
  • When the future state value depends on the prior value, or 
  • When components need to be optimised, 

const [state, dispatch] = useReducer(reducer, initialArgs, init);

 

Real-time webpage data is stored in the state JavaScript object. React state is a React Component instance with observable characteristics that control component activity.

Manage states using Context API
Context API lets you transfer data or state through the component tree without explicitly passing props to each inner component. Context API shares global data like the current authorised user or theme.

in Context API, the Consumer Components pass data, but using this Context API requires long functional code. UseContext hook makes code more understandable, cheaper, and eliminates Consumer Component. The useContext hook is new to React 16.8. 

const authContext = useContext(initialValue);

Manage states using Redux

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
   <Provider store={store}>
       <App />
   </Provider>,
   document.getElementById("root")
);

Install following dependency to use Redux in your application

npm install redux react-redux

Choosing between these choices depends on the project: 

• Use useState to manage simple state. 
• Use useReducer for components with several states or complex transitions. 
• Multiple components need or alter a shared state? Use Context API or Redux Toolkit.