Top React Hooks — Permissions, Titles, Lifecycle

Photo by Kaleidico 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-use

The react-use library is a big library with many handy hooks.

useTitle

The useTitle hook lets us set the title of a page.

We can use it by writing:

import React from "react";
import { useTitle } from "react-use";
export default function App() {
  useTitle("Hello world!");
  return <div className="App" />;
}

We pass the string to the hook to set the title.

usePermission

We can use the usePermission hook to query the permission status of browser APIs.

For instance, we can write:

import React from "react";
import { usePermission } from "react-use";
export default function App() {
  const state = usePermission({ name: "geolocation" });
  return <pre>{JSON.stringify(state, null, 2)}</pre>;
}