Custom Hooks in ReactJS

In this article, we are going to learn how to define custom hooks in ReactJS.

All the rules and usage guidelines are the same as that of the predefined ReactJS hooks like −

  • Call Hooks at the Top Level

  • Call Hooks from React Functions only


In this example, we will build an input validator application that will display some text based on the user-defined conditions in the custom hook.


import React from 'react';
import useForm from './CustomHook';

const App = () => {
   const input = useForm();
   return (
      <input onChange={input.onChange} value={input.value} />
      {input.valid ? 'Welcome to TutorialsPoint' : 'Try again'}
export default App;


import React, { useState } from 'react';

const useForm = () => {
   const [val, setVal] = useState('');
   const [valid, setValid] = useState(false);

   const inputHandler = (e) => {
      setVal(; === 'TutorialsPoint' ? setValid(true) : setValid(false);
   return { value: val, onChange: inputHandler, valid };

export default useForm;

In the above example, when the user types in the input field, then the custom hook is called which decides whether the text is valid or not based on certain conditions.


This will produce the following result.