To save state in React JS, you manage data inside components so that when it changes, the UI updates automatically. This is done using React hooks like useState, useReducer, or state management libraries like Redux. Here’s how to do it in different ways:

---

1. Using useState (Basic Component State)

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // "count" is the saved state

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

• useState creates and tracks a state variable (count)
• setCount updates the value and re-renders the component

---

2. Persisting State with localStorage (Save Across Reloads)

import { useState, useEffect } from 'react';

function CounterWithStorage() {
  const [count, setCount] = useState(() => {
    const saved = localStorage.getItem('count');
    return saved ? parseInt(saved) : 0;
  });

  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
  );
}

• This saves the state even if the user refreshes the page.

---

3. Using useReducer (for complex or grouped state)

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

---

4. Global State Using React Context

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const [user, setUser] = useState(null);
  return (
    <AppContext.Provider value={{ user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

• Use useAppContext() inside any component to read/set global state.

---