How to create custom Hook in React

Spread the love

In this article, we will learn how to create custom hooks in React. Primarily, Hooks are introduced to implement the functionalities of a Class component into a Functional component. Hooks are reusable functions.

Why do we need to use custom Hooks in React

Custom hooks enable us to remove unnecessary duplicated logic from our React components.

Reusability – The same code can be uses multiple times without writing it many times.

Maintainability – We have to change the logic of hooks only once.

It improves the readability of a React functional component.

Rules to write and implement a custom React hook

Custom hooks begin with keyword ‘use’. It is not necessary to begin the custom Hook name with the use keyword but I recommend you to write
custom Hooks starting with the use keyword because it enables us to spot the bug quickly.

Custom hooks always contain built-in React hooks or other custom hooks. If a custom hook does not contain any hook then it will not be a custom
hook.

We should call Hooks at the top level. We cannot use hooks inside nested functions, conditions and loops.

Now, let’s create our own custom React Hooks.

Firstly, I am going to create simple Counter Functional component in which our state value increase and decrease by 1 and initial value is set to 0.

import { useState } from 'react'

function Counter() {
    const [count, setCount] = useState(0);

    function Increment() {
        setCount(count + 1)
    }

    function Decrement() {
        setCount(count - 1)
    }
    return (

        <div>
            <h1>{count}</h1>
            <button onClick={Increment}>Increment</button>
            <button onClick={Decrement}>Decrement</button>
        </div>

    )

}
export default Counter;

import { useState } from 'react'

function Counter() {

const [count, setCount] = useState(0);

function Increment() {

setCount(count + 1)

}

function Decrement() {

setCount(count - 1)

}

return (

<div>

<h1>{count}</h1>

<button onClick={Increment}>Increment</button>

<button onClick={Decrement}>Decrement</button>

</div>

)

}

export default Counter;

Output will be shown like this

Now, if we want to render above functionality in multiple component so here custom hook comes into the role. Basically we will modify the Counter component to make a hook named as ‘useCounter’. So after some modification code will look like this.

import { useState } from 'react'

function useCounter(initialValue=0) {
const [count, setCount] = useState(initialValue);

    function Increment() {
        setCount(count + 1)
    }

    function Decrement() {
        setCount(count - 1)
    }
    return [count , Increment , Decrement]

}
export default useCounter;

import { useState } from 'react'

function useCounter(initialValue=0) {

const [count, setCount] = useState(initialValue);

function Increment() {

setCount(count + 1)

}

function Decrement() {

setCount(count - 1)

}

return [count , Increment , Decrement]

}

export default useCounter;

Let’s say, we want to use our custom hook ‘useCounter’ in three different component e.g. Counter1.jsx, Counter2.jsx, Counter3.jsx. So we will import in our components like this.

Counter1.jsx

import useCounter from './Counter'

function Counter1() {
    const [count, Increment, Decrement] = useCounter(10)

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={Increment}>Increment</button>
            <button onClick={Decrement}>Decrement</button>
        </div>
    )
}

export default Counter1

import useCounter from './Counter'

function Counter1() {

const [count, Increment, Decrement] = useCounter(10)

return (

<div>

<h1>{count}</h1>

<button onClick={Increment}>Increment</button>

<button onClick={Decrement}>Decrement</button>

</div>

)

}

export default Counter1

Counter2.jsx

import useCounter from './Counter'

function Counter2() {
    const [count, Increment, Decrement] = useCounter(20)

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={Increment}>Increment</button>
            <button onClick={Decrement}>Decrement</button>
        </div>
    )
}

export default Counter2

import useCounter from './Counter'

function Counter2() {

const [count, Increment, Decrement] = useCounter(20)

return (

<div>

<h1>{count}</h1>

<button onClick={Increment}>Increment</button>

<button onClick={Decrement}>Decrement</button>

</div>

)

}

export default Counter2

Counter3.jsx

import useCounter from './Counter'

function Counter3() {
    const [count, Increment, Decrement] = useCounter(-10)
     return (
        <div>
            <h1>{count}</h1>
            <button onClick={Increment}>Increment</button>
            <button onClick={Decrement}>Decrement</button>
        </div>
    )
}

export default Counter;

import useCounter from './Counter'

function Counter3() {

const [count, Increment, Decrement] = useCounter(-10)

return (

<div>

<h1>{count}</h1>

<button onClick={Increment}>Increment</button>

<button onClick={Decrement}>Decrement</button>

</div>

)

}

export default Counter;

You can see that initial state value of every component is changed.

Now we have to import all these components in our App.js file to render it on the webpage.

import './App.css';
import Counter1 from './Counter1';
import Counter2 from './Counter2';
import Counter3 from './Counter3';

function App() {
 return (
    <div className="App">
      <Counter1/>
      <Counter2/>
      <Counter3/>

    </div>
  );
}

export default App;