Custom hooks?

In many cases, if you want to add a certain feature to your application, you can simply install a third-party library that is made to solve your problem. But if such a library or hook doesn't exist, what do you do?

As a React developer, it's important to learn the process of creating custom hooks to solve problems or add missing features within your own React projects.

Writing your own custom hook may sound like a daunting task for a beginner React developer. That’s why I’m focusing on a simple example in this article. It’ll help you to grab the concept of a custom hook.

Let’s clean up the App.js and place an input element as below.

// App.js

import React from 'react';

function App() {
  return (
    <div className="App">
     <input type="text" />
    </div>
  );
}

export default App;

Now our browser should refresh and show the text input without any issues. As you type your values, it should be shown in the text input as usual. Now we will assign the value from text input to a state value using the hook useState. Once we set the value it should look as below.

// App.js

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState("")

  return (
    <div className="App">
     <input 
        type="text" 
        value={inputValue}
        onChange={(e)=>{
            setInputValue(e.target.value)
        }}
      />
    </div>
  );
}

export default App;

Great. Things should still work fine as usual. I again assume that you are already familiar with the useState hook. Now say for an example, you want to set the limit of the text input to be just 5 characters.

I know you can write a function and validate it. But let us create a custom hook to handle this validation. I’m going to create a new directory named hooks and add a new file named useCharLimit.js. It’s a good practice to start the name of your hooks with the keyword use.

Finally, the time to write the code for our custom hook. Without complicating it, just make sure to use the state of the input in the hook instead of the App.js. so our hook should look something like below. As you can see below, I’ve imported useState in the custom hook.

// useCharLimit.js

import {useState} from 'react'

const useCharLimit = (value, limit) => {
    const [charValue, setCharValue] = useState(value)    
    const validateCharacterLimit = (value) => {
        if (value.length <= limit) {
            setCharValue(value)
        }
    }
    return [charValue, validateCharacterLimit];
}

export default useCharLimit;

and change the App.js like this to pass the parameter to hook.

// App.js

import React, { useState } from 'react';
import useCharLimit from './hooks/useCharLimit';

function App() {
  const [inputValue, setInputValue] = useCharLimit("", 10)

  return (
    <div className="App">
     <input 
        type="text" 
        value={inputValue}
        onChange={(e)=>{
            setInputValue(e.target.value)
        }}
      />
    </div>
  );
}

export default App;

Refer codesandbox example here :)

As I've attempted to illustrate through the example, custom React hooks can give us the tools to fix our own problems when third-party libraries fall short.

I hope that this guide has given you a better idea of when and how to create your own React hooks.

Thank you! Happy coding :)