R

Rupali Yadav

Sept 09, 2022

How to create a custom hook with ReactJs

#javaScript

#reactjs

#customhook

#reacthooks

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 us on github and twitter.
Also follow me on twitter. I post javascript concepts and utility code snippets.

Copyright © 2022 Web Expe

Privacy PolicyTerms and Conditions