To learn how to create custom hook we have create simple counter application using custom hook.

In react js hook's standard prefix (use) to using we have create new hook component useCounter.js.

so now we need three functionality in custom hook like "Increment" , "Decrement" and "Reset" counter and for that we have use useState hook to store counter in state.

In custom hook(useCounter) we have pass intialval to set state defualt value.

useCounter.js

import {useState} from 'react'

export default function useCounter(intialval) {

    const [counter,setCounter] = useState(intialval);

  const increment = () =>{
    return setCounter(counter+1); 
  }

  const decrement = () =>{
    return setCounter(counter-1); 
  }

  const reset = () =>{
    return setCounter(intialval); 
  }


    return [counter,increment,decrement,reset]
}
App.js File

import 'bootstrap/dist/css/bootstrap.min.css';
import {Button,Badge} from 'react-bootstrap';
import './App.css';
import useCounter from './useCounter';

function App() {

  const [counter,increment,decrement,reset] = useCounter(0);
  
  return (
    <div className="App">
      <header className="App-header">
        <h1>Custom Hook</h1><br/>
      <Badge bg="secondary">{counter}</Badge>
      <br/>
        <div>
        <Button variant="primary" onClick={()=>increment()}>Increment</Button> &nbsp;&nbsp;
        <Button variant="danger" onClick={()=>decrement()}>Decrement</Button> &nbsp;&nbsp;
        <Button variant="success" onClick={()=>reset()}>Reset</Button>
        </div>
      </header>
    </div>
  );
}

export default App;
Full Source Code