useReducer Hook

The useReducer hook is like the superhero of state management. It brings a more advanced toolkit to the table, allowing you to tackle complex state logic with finesse. Its real magic shines through when you’re dealing with state transitions that hinge on knowing what happened in the previous state. It’s basically your go-to when things start getting a bit tricky.

Syntax:

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

Parameters:

state: The current state value.
dispatch: A function that allows you to trigger state transitions by dispatching actions.
reducer: A function that specifies how the state should change in response to dispatched actions.

Javascript

// App.js 
import "./App.css"; 
import Counter from "./components/Counter"; 
  
function App() { 
    return ( 
        <> 
            <Counter /> 
        </> 
    ); 
} 
export default App;

Javascript

import React, { useReducer } from "react"; 
  
const initialState = { count: 0 }; 
function reducer(state, action) { 
    switch (action.type) { 
        case "increment": 
            return { 
                count: state.count + 1, 
            }; 
        default: 
            return state; 
    } 
} 
function Counter() { 
    const [state, dispatch] = useReducer(reducer, initialState); 
  
    return ( 
        <div className="App"> 
            <h2>{state.count}</h2> 
            <button 
                onClick={() => 
                    dispatch({ 
                        type: "increment", 
                    }) 
                } 
            > 
                Add One 
            </button> 
        </div> 
    ); 
} 
  
export default Counter;

CSS

.App { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 
  
body { 
    background-color: rgb(254, 226, 190); 
} 
  
.App>h2 { 
    text-align: center; 
} 
  
.App>button { 
    width: 8rem; 
    font-size: larger; 
    padding: 2vmax auto; 
    height: 1.8rem; 
    color: white; 
    background-color: rgb(34, 34, 33); 
    border-radius: 10px; 
} 
  
button:hover { 
    background-color: rgb(80, 80, 78); 
}

Output:

Output

Difference between useState and useReducer

React offers powerful tools, like `useState` for simple tasks making it a friendly companion, and `useReducer` for complex challenges, functioning like a superhero team. While both manage information, `useState` is ideal for everyday simplicity, resembling a sticky note, while `useReducer` shines in intricate scenarios, handling simultaneous complex tasks. The choice between them depends on the nature of your website’s needs and the level of complexity involved.

Table of Content

useState Hook
useReducer Hook
When to use useState ?
When to use useReducer ?
Difference between useReducer and useState hook

Tags:

#React-Hooks #ReactJS #Web Technologies

useState Hook:

When to use useState ?

useReducer Hook

Syntax:

Parameters:

Javascript

Javascript

CSS

Difference between useState and useReducer

Similar Reads