Top React Hooks — Arrays and Inputs

Photo by Alonso Reyes 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 Hooks Lib

React Hooks Lib is a library that has many reusable React hooks.

To install it, we can run:

npm i react-hooks-lib --save

Then we can use the hooks that come with the library.

The useList hook lets us create a state array and manipulate it.

For instance, we can write:

import React from "react";
import { useList } from "react-hooks-lib";
export default function App() {
  const { list, sort, filter } = useList([13, 5, 7, 4, 4, 6, 5, 7, 3.3, 6]);
  return (
    <div>
      <button onClick={() => sort((x, y) => x - y)}>sort</button>
      <button onClick={() => filter(x => x >= 5)}>
        greater than or equal to 5
      </button>
      <p>{JSON.stringify(list)}</p>
    </div>
  );
}

The useList hook takes an array as the argument.

This is used as the initial value of the list state.