Welcome to my very first post as a front-end engineering student. In this post, I will be building 2 different counter apps, one created with the useReducer Hook and the other with the custom hook. Before proceeding you need to have basic knowledge of React and React Hooks. ## Features of Both Counter Apps - Increment button - Decrement button - Reset button - Input field to set value ## Setting Up This project is built entirely in code sandbox, so no need to run create-react-app. Code sandbox already has react template set up, but if you are using an IDE like vscode then simply open up your terminal and run.`npx create-react-app react-counter-app`. Under components create two pages, one for the useReducer counter app and the other for the custom hook counter app. Now let's proceed ;) ## useReducer Counter App The useReducer hook is an alternative to the useState hook. It is most preferable when you are keeping track of multiple pieces of state that rely on complex logic. Just like other hooks in react we can; `import React, { useReducer} from 'react'` The useReducer hook takes in two arguments and returns an array with 2 values which are the state value and a dispatch function to which you can pass an action and later invoke it. ``` // Defining the initial state and the reducer const initialState = { count: 0, value: parseInt('') }; const reducerCounter = (state, action) => { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count !== 0 ? state.count - 1 : (state.count = 0) }; case 'setValue': return { count: action.payload }; case 'reset': return initialState; default: throw new Error('Error occurred in counter'); } }; ``` I started off by defining the initial value and setting parseInt to an empty string. The parseInt function converts its first argument to a string, parses that string, and returns an integer or NaN. This function helps us extract the value from the input field after the user inputs it. Next, we initialize the useReducer hook ``` // Initialising useReducer hook export default function ReactCounter() { const [state, dispatch] = useReducer(reducerCounter, initialState); const changeCounterValue = (value) => { dispatch({ type: 'setValue', payload: parseInt(value) }); }; return ( <>

UseReducer Counter

Count:

{state.count}

{ changeCounterValue(e.target.value); }} />

``` ## Counter App with Custom Hooks Custom hooks are reusable functions that we create ourselves as developers. They can be used to add special unique functionality to the react application. Custom hooks start with 'use' and can be used to call other hooks. I started off by creating a custom hook called useCounter. Our useCounter hook would have a state to hold the counter value. It would have 4 methods; increment, decrement, reset, and set value. ``` const useCounter = (initialValue = 0) => { const [counter, setCounter] = useState(initialValue); const handleIncrease = () => setCounter((prev) => prev + 1); const handleDecrease = () => setCounter((prev) => prev - 1); const handleReset = () => setCounter(initialValue); const handleSetValue = (value) => setCounter(parseInt(value)); return [ counter, { setIncrease: handleIncrease, setDecrease: handleDecrease, setReset: handleReset, setValue: handleSetValue } ]; }; function CustomHook() { const [count, { setIncrease, setDecrease, setReset, setValue }] = useCounter( 0 ); return (

Custom Hook Counter

Count is: {count}

{ setValue(e.target.value); }} />

); } ``` And there you have it, two counter apps, one with useReducer and the other with custom hooks. ## Additional Feature Here are some of the additional features I added to the app. - Randomized Background Color - 404 page - A page to test error boundary and - I implemented SEO View full code here - https://codesandbox.io/s/counter-app-jyq7n9?file=/src/Home.js Visit the published site here - https://csb-jyq7n9.netlify.app/

ethel_tech

How to Create a Counter App with useReducer and Custom Hooks

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