Learn React Hooks

Creating the useCounter Hook

The useCounter Hook is going to provide a current count and functions to increment and reset the counter.

Let's create the useCounter Hook now using the following steps:

1. Create a new src/hooks/useCounter.js file.
2. Import the useState and useCallback Hooks from React as follows:

import { useState, useCallback } from 'react'

3. We define a new useCounter Hook function with an argument for the initialCount:

export default function useCounter (initialCount = 0) {

4. Then, we define a new State Hook for the count value with the following code:

    const [ count, setCount ] = useState(initialCount)

5. Next, we define functions for incrementing and resetting the count, as shown here:

 const increment = useCallback(() => setCount(count ...