Before the release of React Hooks, the framework’s functional components were a bit limited in usage. When it came to working with state, the 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 started on this interesting journey.

---

useFiler Hook

There is a very cool collection of hooks by Christopher Patty that are known as crooks.

I personally like the 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 the 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 (
	    <div>My Project</div>
	  )
	}

As you can see from the code above, we now have access to the 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 JSON-serializable data:

add("Save this JSON-serializable data in the file.")

Note: 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

Theupdate() 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.")

#typescript #react #web-development #javascript #programming #react hooks