Top React Hooks — Managing States

Photo by Yuiizaa September on Unsplash

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-hanger

The react-hanger library comes with various hooks we can use to do various things.

To install it, we run:

yarn add react-hanger

We can use the useArray hook to manipulate arrays easily.

For example, we can write:

import React from "react";
import { useArray } from "react-hanger";
export default function App() {
  const todos = useArray(["eat", "drink", "sleep"]);
  return (
    <>
      <button onClick={() => todos.push("new task")}>push new task</button>
      <button onClick={() => todos.unshift("new task")}>
        unshift new task
      </button>
      <button onClick={() => todos.pop()}>pop new task</button>
      <p>{todos.value.join(", ")}</p>
    </>
  );
}

The useArray hook returns an object with various methods for changing the array.

It also returns the value property with the state of the array.