by Sai gowtham

How to create your own React Custom hooks (example)

In this tutorial, you are going to learn about how to create your own react custom hooks with the help of examples.

First, we will see an example of a counter using useState hook.

App.js
import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  function Increment() {
    setCount(count + 1);
  }
  function Decrement() {
    setCount(count - 1);
  }
  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={Increment}>Increment</button>      <button onClick={Decrement}>Decrement</button>    </div>
  );
}

In the above example, we created a counter which is increments by 1 when we click on a increment button and decrements by 1 when we click on a decrement button.

Suppose we need this counter in different places of our app in such cases we can build our custom react hook instead of creating same counter logic again and again.

Custom hooks

Custom hooks are JavaScript functions, whose name starts with use and they can call other react hooks.

Now, we are removing the counter logic from the above example and creating our own custom hook called useCounter.

counter-hook.js
import { useState } from "react";
function useCounter(val, step) {
  const [count, setCount] = useState(val);
  function Increment() {
    setCount(count + step);  }

  function Decrement() {
    setCount(count - step);  }

  return [count, Increment, Decrement];}

export default useCounter;

In the above code, we created our own custom hook called useCounter with two parameters val and step and returning an array with count value , Increment and Decrement functions.

  • val: Initial value of the counter.
  • step: How many steps counter needs to increment or decrement.

Using the Custom hook

Let’s use the useCounter custom hook inside App component by importing it from the counter-hook.js file.

App.js
import React from "react";
import useCounter from "./counter-hook";
function App() {
  const [count, Increment, Decrement] = useCounter(0, 1);
  return (
    <div className="App">
        <h1>{count}</h1>
        <button onClick={Increment}>Increment</button>
        <button onClick={Decrement}>Decrement</button>
    </div>
  );
}

export default App;

Now, we have a reusable counter logic we can use it whenever we need a counter in our react app.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course