Top React Hooks — Global State, Image Size, and Lifecycle

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-global-state

The react-hooks-global-state library lets us create global states for our React app easily.

To use it, we install it by running:

npm install react-hooks-global-state

Then we use it by writing:

import React from "react";
import { createGlobalState } from "react-hooks-global-state";

const initialState = { count: 0 };
const { useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [count, setCount] = useGlobalState("count");
  return (
    <div>
      <span>Counter: {count}</span>
      <button onClick={() => setCount(count => count + 1)}>increment</button>
      <button onClick={() => setCount(count => count - 1)}>decrement</button>
    </div>
  );
};

export default function App() {
  return (
    <>
      <Counter />
      <Counter />
    </>
  );
}

We create a global state with the createGlobalState function.

We pass in the initialState to it to set that as the initial state.

This returns the useGlobalState hook which has the global state.

Then we can use that with the useGlobalState hook.

We pass in the state we want to get by passing in a string.

It returns an array with the state value and the function to change it in that order.

We call setCount as we do with useState ‘s state change functions.

react-hooks-image-size

The react-hooks-image-size library has a React hook for getting the size of an image.

To install it, we run:

npm install --save @use-hooks/image-size

or

yarn add @use-hooks/image-size

Then we can use it by writing:

import React from "react";
import useImageSize from "[@use](http://twitter.com/use "Twitter profile for @use")-hooks/image-size";

export default function App() {
  const url = "https://placekitten.com/g/600/600";
  const [width, height] = useImageSize(url);

  return (
    <>
      <img src={url} width={100} height={100} alt="cat" />
      <div>
        Natural size: {width} x {height}
      </div>
    </>
  );
}

The useImageSize hook returns the image’s natural width and height.

These are the values of width and height respectively.

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 useDidMount hook lets us run some code when the component is mounted.

For instance, we can use it by writing:

import React from "react";
import { useDidMount } from "react-hooks-lib";

export default function App() {
  useDidMount(() => {
    console.log("mounted");
  });

  return <></>;
}

We use the useDidMount hook with a callback which runs when the component is mounted.

The useWillUnmount hook is the equivalent of the componentWillUnmount method of React class components.

The callback we pass in runs when the component will unmount.

For example, we can write:

import React from "react";
import { useWillUnmount } from "react-hooks-lib";

export default function App() {
  useWillUnmount(() => {
    console.log("will unmount");
  });

  return <></>;
}

to run the callback when the component unmounts.

Conclusion

The react-hooks-global-state library lets us create a global state in our React app.

The react-hooks-image-size library gets the natural size of the image.

React Hooks Lib is a library with a bunch of reusable hooks.