Top React Hooks — State and API

Photo by Taylor Simpson 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.

Nice Hooks

Nice Hooks is a set of hooks that does various things.

To install it, we run:

npm install nice-hooks

The useLifeCycle hook lets us add lifecycle methods as we do with class components.

For instance, we can write:

import React from "react";
import { useLifeCycle } from "nice-hooks";
export default function App() {
  useLifeCycle({
    didMount() {
      console.log("mounted");
    },
    willUnmount() {
      console.log("willUnmount");
    },
    didUpdate() {
      console.log("didUpdate");
    },
    didMountAndWillUnmount: [
      {
        didMount() {
          console.log("didMount");
        },
        willUnmount() {
          console.log("willUnmount");
        }
      },
      {
        didMount() {
          console.log("didMount");
        },
        willUnmount() {
          console.log("willUnmount");
        }
      }
    ]
  });
  return <div />;
}

We use the useLifeCycle hook to add the lifecycle hooks to our components.

The useInstanceVar hook lets us create instance variables in our component.

For example, we can write:

import React from "react";
import { useInstanceVar, useSingleState } from "nice-hooks";
export default function App() {
  const [getIntervalVal, setIntervalVal] = useInstanceVar(null);
  const [state, setState] = useSingleState({ count: 0 });
  function start() {
    const interval = setInterval(
      () => setState({ count: state.count + 1 }),
      1000
    );
    setIntervalVal(interval);
  }
  function stop() {
    const interval = getIntervalVal();
    interval && clearInterval(interval);
  }
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={start}>Start</button>
      <button…