Skip to Content

Top React Hook 3rd party library

Nazar Martincenco
August 10, 2020


React team added a new cool feature in 16.8 release – Hooks. Hooks will let you use state and other React features without writing a class. They quickly become a #1 choice for any react developer, as it makes much easier to understand complex components logic and the code in general looks much neat.

3rd party library for React Hooks

Today I want to share with the community my favourite (and one of the most popular react libraries) for extending react hooks functionality streamich/react-use

I want to show on how easy it is to extend your application logic with this library. It supports several categories:

  • Sensors
  • UI
  • Animations
  • Side-effects
  • Lifecycles
  • State

React Sensors hooks

Device Battery Level

import { useBattery } from "react-use";

const Demo = () => {
  const state = useBattery();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;

Which gives you the following result:

  "charging": true,
  "level": 0.9,
  "chargingTime": 5,
  "dischargingTime": null

Tracks state of user’s internet connection

Very useful hook if you are using React Native for mobile development.


import {useNetwork} from 'react-use';

const Demo = () => {
  const state = useNetwork();

  return (
      {JSON.stringify(state, null, 2)}


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

UI hooks

Plays audio and exposes its controls. With this hook you can create an online audio player in 3 minutes.


import {useAudio} from 'react-use';

const Demo = () => {
  const [audio, state, controls, ref] = useAudio({
    src: '',
    autoPlay: true,

  return (
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <button onClick={controls.pause}>Pause</button>
      <button onClick={}>Play</button>

Animations hooks

Side-effects Hooks

Hook to read, update and delete a cookie


import { useCookie } from "react-use";

const Demo = () => {
  const [value, updateCookie, deleteCookie] = useCookie("my-cookie");
  const [counter, setCounter] = useState(1);

  useEffect(() => {
  }, []);

  const updateCookieHandler = () => {
    setCounter(c => c + 1);

  return (
      <p>Value: {value}</p>
      <button onClick={updateCookieHandler}>Update Cookie</button>
      <br />
      <button onClick={deleteCookie}>Delete Cookie</button>

State Hooks

This is my #1 hook to work with arrays in a component and control it’s state. You can:

  • clear
  • filter
  • push
  • remove
  • set
  • sort
  • updateAt


const Demo = () => {
  const [
    { clear, filter, push, remove, set, sort, updateAt }
  ] = useList();

  return (
      <button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
      <button onClick={() => push(}>Push timestamp</button>
      <button onClick={() => updateAt(1,}>
        Update value at index 1
      <button onClick={() => remove(1)}>Remove element at index 1</button>
      <button onClick={() => filter(item => item % 2 === 0)}>
        Filter even values
      <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
      <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
      <button onClick={() => clear()}>Clear</button>
      <pre>{JSON.stringify(list, null, 2)}</pre>

About the author

Software Development Lead | UK
Nazar is a development and DevOps lead in Application & Cloud Practice. In this role, he is leading full-stack software development in .Net Core, C#, React and Azure. His main topics of interest are digital transformation, Cloud and Data Science. Nazar likes working with the most technically complicated projects and always delivers them with high standards. He is also a huge fun and advocate of Az


    Leave a Reply

    Your email address will not be published. Required fields are marked *