Top React Hooks — Lifecycle and State

Photo by Peter Conlan 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 hookedUp

React hookedUp is a library with many hooks to make our lives easier.

To install it, we run:

npm install react-hookedup --save

or:

yarn add react-hookedup

Then we can use the useBoolean hook to let us toggle a boolean value.

For instance, we can write:

import React from "react";
import { useBoolean } from "react-hookedup";
export default function App() {
  const { toggle, value } = useBoolean(false);
  return (
    <div>
      <button onClick={() => toggle()}>toggle</button>
      <p>{JSON.stringify(value)}</p>
    </div>
  );
}

We use the useBoolean hook with the initial value.

It returns an object with the toggle and the value properties.

toggle lets us toggle the boolean value.

value has the current value.