Share:

R

Rupali Yadav

Sept 09, 2022

How to create a custom hook in ReactJs

#javaScript

#reactjs

#customhook

#reacthooks

#webexpe

#webexpe.com

#rupali yadav

#rupali

How to create a custom hook with ReactJs | Rupali Yadav

In this article we are going to have a look at how to create our own hooks. So let's dive in.

What is a custom hook?

let's take a look at the defination at reactjs.org
Custom Hooks are a mechanism to reuse stateful logic Ex: setting up a subscription and remembering the current value, but every time you use a custom Hook, all state and effects inside of it are fully isolated.

When should a developer write a custom hook?

when you have a common logic written for a state's update in more than one components, we can turn it into a custom hook

Perks of writing a custom hook?

  • Reduces redundant code.
  • Every time you call a hook all your state and effects inside of it are fully isolated that means you can call the same hook twice in one component.

Rules to write a custom hook?

  • Prerequisite - use React version 16.8. and above
  • Custom hook name starts with "use". This convention is very important. As React would be able to automatically check for violations of rules of Hooks incase of error because a normal function call does not convey if a certain function contains calls to Hooks inside of it.

Lets create a Loader custom hook.

Loaders are a basic necessity in every website that is shown on the screen to signal the user that some data is being asynchronously fetched.
Create a folder named hooks to keep all the hooks at one place.
Inside it create a UseLoader.js file.

As shown in the code snippet below we have used useState to create a state to show/hide the loader.
The UseLoader method return an array with first entity as the State to be read and the second entity to update the State.
// inside /hooks/UseLoader.js
import { useState } from "react";
const UseLoader = ({ isLoading = false }) => {
// resusable stateful logic
const [isLoading, setLoading] = useState(isLoading);
return [isLoading, setLoading];
}
export default UseLoader;

Now let's use this custom hook in one of our components

// inside /components/Home/index.js
import Loader from '../loader';
import useLoader from '../../hooks/useLoader'; // importing the hook
const Home = () => {
// setting isLoading as false initially
const [isLoading, setLoading] = useLoader(false);
useEffect(() => {
const getCustomerDetails = async () => {
// setting the loader as true
setLoading(true);
try {
await fetch(custApiUrl);
// setting it as false after the api call
setIsLoading(false);
} catch (e) {
// setting it as false incase of errors
setIsLoading(false);
}
}
};
getCustomerDetails
}, []);
return (
<>
{isLoading && <Loader />}
...
</>
);
}
export default Home;
In the above code snippet we can see how to import the loader hook and update it's state.
And that's it we have successfully created and used a custom hook.

Thanks for reading with us till here 🙂. If this article helped you please follow me on twitter, github and linkedIn for more such articles and other updates.
If you have any queries please write them below.

More from Author

What is hoisting in Javascript
What is hoisting in Javascript
Difference between pass by value and pass by reference in javascript
Difference between pass by value and pass by reference in javascript
How to use ref to style in react
How to use ref to style in react

Share:

Copyright © 2022 Web Expe

Privacy PolicyTerms and Conditions