Your Custom React Hooks

If you used class-based component rendering in React then Hooks is a new way to let you state and other React features without writing a class. Hooks will revolutionize how the React code is to be written. Sooner or later, you will have to dive into hooks.

Custom Hooks???

When we want to share logic between two JavaScript functions, we extract it to a third function. Both components and Hooks are functions, so this works for them too!

A custom Hook is a JavaScript function whose name starts with “use” and that may call other Hooks. For example, useOnlineStatus
Below is our first custom Hook, Here we will check for online status.

Eg: Creating Custom Hooks

React hook for subscribing to online/offline events and the navigator.onLine property to see the current status.

To use these custom hooks into other components import the above file to that component and check status.

You can take this hook or any other custom hook to a whole new level with your imagination. It’s much easy and cleaner than render props and HOC.

Happy Coding…