useReducer

useReducer.jsx

import { useReducer } from "react";

// where we need to manage multiple states
// and one solution for multiple states reduce to one i.e. `reducer`

function reducerFunc(state, action){
    if(action.type === "INC"){
        return state + 1
    } else if (action.type === "DEC"){
        return state - 1
    } else {
        return state
    }
}

export default function MyReducerComp(){
    const [count, dispatchCount] = useReducer(reducerFunc, 0);

    return(<>
    <div className="pannel">
        <div>{count}</div>
        <button onClick={() => dispatchCount({type: "INC"})}>+</button>
        <button onClick={() => dispatchCount({type: "DEC"})}>-</button>
    </div>
    </>)
};