In this post, I will go through how to build a counter app in react using a useState and useReducer custom hooks. ## useState and useReducer? Usually, when we want to handle simple states in React, we heavily rely on the useState hook. The useState hook helps in managing linear states. However, sometimes we get to deal with more complex state logic, where the multiple sub-values or next state depends on the previous state or might be deep updates are required to handle the state in React. Luckily react has come up with something to solve the problem of managing complex state in a concise and elegant manner which is the useReducer hook. ## These are the list of dependencies used for this app - react - react-dom - react-router-dom - react-error-boundary ## STEPS Build react app ``` npx create-react-app myapp ``` _NB: 'myapp' can be any name of your choosing._ Enter into the project's root. ``` cd myapp ``` Start the app ``` npm start ``` ### **Counter 1 (useReducer Hook)** Import the useReducer hook from react. ``` import { useReducer } from "react"; ``` **CODE SET UP** ```React import { useReducer } from "react"; const UseReducer = () => { function setValue(value, count) { let num = Number(value); if (String(num) == "NaN" || value == "") { return count; } return num; } const reducer = (count, action) => { switch (action.type) { case "setValue": return setValue(action.payload, count); case "increment": return ++count; case "decrement": return --count; case "reset": return 0; default: return count; } }; const [count, dispatch] = useReducer(reducer, 0); return { count, dispatch }; }; const Reducer = () => { const { count, dispatch } = UseReducer(); const Increment = () => { dispatch({ type: "increment" }); }; const Decrement = () => { dispatch({ type: "decrement" }); }; const Reset = () => { dispatch({ type: "reset" }); }; return (

Welcome to the useReducer page...
Check out the Counter!

dispatch({ type: "setValue", payload: e.target.value }) } />

COUNTER = {count}

); }; export default Reducer; ``` ### **Counter 2 (useState Hook)** Again, we import the useState hook from react. ``` import {useState} from "react"; ``` **CODE SET UP** ```react import {useState} from 'react' function UseCounter() { const [value, setValue] = useState(0); const increment = () => { setValue((prevValue) => prevValue + 1); }; const decrement = () => { setValue((prevValue) => prevValue - 1); }; const reset = () => { setValue(0); }; function setInput(value) { let num = Number(value) if(String(num) == "NaN" || value == "") { return value; } return num; } return [value, increment, decrement, reset, setInput] } const Counter = () => { return (

Welcome to the custom Hook page...
Check out the Counter!

COUNTER = {value}

); }; export default Counter; ``` There you have it! Your react counter app using the useState and useReduce hooks. I hope this article was helpful. Feel free to check out the source code in my [GitHub repository](https://github.com/Fizz-Baba/examination-altschool). Here is also the link to the [live app](https://636662f473e5ca7161a4f5f1--aesthetic-salmiakki-5eda67.netlify.app/) Thank you for reading.

Welcome to the useReducer page... Check out the Counter!

COUNTER = {count}

Welcome to the custom Hook page... Check out the Counter!

COUNTER = {value}

Welcome to the useReducer page...
Check out the Counter!

Welcome to the custom Hook page...
Check out the Counter!

fizzbaba

Building a React Counter App with useState and useReducer.

Join Our Newsletter. No Spam, Only the good stuff.