← back to the blog


"react-use" library is simply AMAZING!

Posted on July 19th, 2020 in NodeJS by George

 

Today I was browsing around to find some useful tools for my next react project. I came across https://www.npmjs.com/package/react-use.

This library is absolutely amazing to use inside your react hooks based application.

Let me show you why.

If you recently moved from class-based components to functional, hooks-based ones, you may be missing the naming of the lifecycle methods. 

Well, react-use does bring them back to you.

1. React lifecycles hooks. useMount and more.

// ***Current React Hooks way of doing "on mount" ***

import {useEffect} from 'react-use';

...

useEffect(() => {

 fetchInitialData()

}, []);


//   ***Using useMount ***

import {useMount} from 'react-use';

...

useMount(() => {

 fetchInitialData();
 
});

 

Why use "useMount" you may ask? Well, first of all, no more warnings in the console about how you are calling useEffect with an empty dependency array. Then you must admit, this looks cleaner with a more meaningful naming.

Same goes for "useUnmount", in fact, there are a lot of other useful lifecycle methods.

Go and check the documentation https://www.npmjs.com/package/react-use.

 

2. Sensors.  

This collection of hooks seems to be more useful for mobile devices.

"useMotion", this one is a react sensor hook that uses the device's acceleration sensor to track its motions. 

"useNetwork"  hook that tracks connected hardware devices and returns data in JSON format.

{
  "online": true,
  "since": "2018-10-27T08:59:05.562Z",
  "downlink": 10,
  "effectiveType": "4g",
  "rtt": 50
}

 

"usePageLeave",  hook that fires a callback when the mouse leaves the page. This may be used as a good opportunity to show something sparkly in the attempt of bringing the user's attention back to your page. 

"useOrientation", hook that tracks screen orientation of user's device. Now you see how useful some of these hooks can be.

Go to the official page and explore the rest of the hooks inside the Sensor category.

 

3. Side-effect.  

This category has lots of hooks useful for asynchronous operations and other abstractions over the browser API. 

"useCookie" for cookies manipulation.

import { useCookie } from "react-use";


//Set the functions to be used 

const [value, updateCookie, deleteCookie] = useCookie("cookie-example");

// Call updateCookie, deleteCookie as you need

 

"useCopyToClipboard" . I suppose the name is self-explanatory.

const Component = () => {
  const [text, setText] = React.useState('');
  const [state, copyToClipboard] = useCopyToClipboard();

  return (
    <div>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button type="button" onClick={() => copyToClipboard(text)}>copy text</button>
      {state.error
        ? <p>Unable to copy value: {state.error.message}</p>
        : state.value && <p>Copied {state.value}</p>}
    </div>
  )
}

 

I hope this short introduction is going to stimulate your interest.

All the best.