7 Awesome React Hooks

Before the release of React Hooks, its functional components were a bit limited in usage. I mean, when it comes to working with State, context API, and some Lifecycle methods there was nothing we could do. But, starting from React 16.8, we have a lot more flexibility to reuse an existing piece of code. Today, you will learn about the usage of different React Hooks to solve everyday problems. So, let’s get ready and follow along with me on this interesting journey. useFiler Hook There is a very cool collection of hooks by Christopher Patty which is known as “crooks“. I personally like its useFiler hook because it enables us to create a virtual file system right inside a web browser. Basically, it makes use of the browser’s local storage to manage the files and their contents. To get started, install the crooks package in your application. npm install crooks –save Now, import useFiler hook from crooks. import { useFiler } from ‘crooks’ At this point, we are ready to initialize the hook and manage a virtual file system. Here’s a quick example code snippet. const App = () ={ const [files, {add, remove, update, clear}] = useFiler(“localStorageItem”) return ( My Project ) } As you can see from the above code that we now have access to add(), remove(), update(), and clear() methods. Let’s have a look at how to use them. Add File The add() function accepts one required parameter. Here, we need to pass a JSON-serializable data. add(“Save this JSON-serializable data in the file.”) A point to be noted is that this function will automatically generate an ID for every new file. But, you can still set a custom ID by passing an integer or string as the second parameter. Update File The update() method accepts two arguments. The first one is the ID of the file whereas the second argument is used to pass the new data. update(“abc1234”, “New content of file.”) Remove File Pass the ID of the file in remove() function to delete it. Clear All Files Call the clear() function to remove all files. useFetch Hook Steven Persia (a MERN Stack developer), has compiled a great list of React Hooks called “Captain hook” that is very helpful in everyday tasks. The next few examples of Hooks will be from his collection, including this one. useFetch can be used to get data from an API. After the request is completed, it will return the response and errors (if any). Import it in your project. import useFetch from “hooks/useFetch”; Make a request. const { response, errors } = useFetch(“https://api.github.com/users/torvalds/repos”); useHover Hook useHover hook belongs to the “Captain hook” collection. Basically, it tracks the mouse cursor on the screen to detect whether it is placed on a specific element or not. If so, it will trigger the hovered event. Import the hook. import useHover from “hooks/useHover”; Initialize useHover hook. const [hoverMe, isHovered] = useHover(); Here, hoverMe refers to the specific HTML element whereas isHovered contains a boolean value that can be checked in a conditional statement. For example, we can use something like this. {isHovered ? “Hovered!” : “Hover me!”} useSlug Hook Slug is an important part of every web project.  » Read More

Like to keep reading?

This article first appeared on livecodestream.dev. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply