Top React Hooks — Github and States

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.

@d2k/react-github

@d2k/react-github is a series of React hooks that let us get data from Github.

To install it, we run:

npm i @d2k/react-github --save

Then we can use the useLatestRelease hook by writing:

import React from "react";
import { useLatestRelease } from "@d2k/react-github";

export default function App() {
  const { release, loading, error } = useLatestRelease("facebook", "react");

  return (
    <>
      <div>{JSON.stringify(release)}</div>
    </>
  );
}

We get the latest errors by using the useLatestRelease hook with the user and repo name.

Then release has an object with the release data.

loading and error have the loading and error states.

We can use the useTaggedRelease hook to get a tagged release from our app.

To use it, we write:

import React from "react";
import { useTaggedRelease } from "@d2k/react-github";

export default function App() {
  const { release, loading, error } = useTaggedRelease(
    "facebook",
    "react",
    "v16.8.4"
  );
  return (
    <>
      <div>{JSON.stringify(release)}</div>
    </>
  );
}

It also has the useForks hook to get the forks of a repo.

The first argument is the user.

The 2nd argument is the repo.

The 3rd is the tag version.

For instance, we can write:

import React from "react";
import { useForks } from "@d2k/react-github";

export default function App() {
  const { forks, loading, error } = useForks("facebook", "react");

  return (
    <>
      <div>{JSON.stringify(forks)}</div>
    </>
  );
}

to get the forks of React.

@d2k/react-localstorage

@d2k/react-localstorage is a package with hooks to manipulating local storage.

To use it, we run:

npm i @d2k/react-localstorage --save

to install it.

Then we can use it by writing:

import React from "react";
import useLocalStorage from "@d2k/react-localstorage";

export default function App() {
  const [firstName, setFirstName, removeFirstName] =   useLocalStorage(
    "firstName",
    "mary"
  );
  const [lastName, setLastName, removeLastName] = useLocalStorage(
    "lastName",
    "smith"
  );

  return (
    <>
      <div>
        {firstName && lastName && (
          <p>
            Hello {firstName} {lastName}
          </p>
        )}
      </div>
    </>
  );
}

We used the useLocalStorage hook which returns the current value, a function to update the item with the given key, and remove the item with the given key in this order.

The key is the first argument of the hook.

The default value is the 2nd argument.

Then we can use them to update our local storage instead of manipulating it directly.

Hookstate

The Hookstate package lets us manage state globally in our app.

It can be used as an alternative to state management solutions like Redux or Mobx.

To install it, we run:

npm install --save @hookstate/core

or:

yarn add @hookstate/core

to install it.

Then we can use the hooks it comes with by writing:

import React from "react";
import { createState, useState } from "@hookstate/core";
const globalState = createState(0);

export default function App() {
  const state = useState(globalState);
  return (
    <>
      <p>Counter value: {state.get()}</p>
      <button onClick={() => state.set(p => p + 1)}>Increment</button>
    </>
  );
}

We use the createState function to create a global state.

Then we can pass that into the Hookstate’s useState hook so we can do stuff to it.

We call get to get the current state.

And we call set to set the new state.

Conclusion

There’re useful hooks for getting data from Github and managing local storage and app state.