Top React Hooks — Shared Data and Default States

Photo by Mimi Thian 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.

createStateContext

The createStateContext function is a function to create React context hooks.

It acts like useState but the state can be shared with all components in the provider.

For example, we can use it by writing:

import React from "react";
import { createStateContext } from "react-use";
const [useSharedText, SharedTextProvider] = createStateContext("");
const InputA = () => {
  const [text, setText] = useSharedText();
  return (
    <p>
      <input
        type="text"
        value={text}
        onInput={ev => setText(ev.target.value)}
      />
    </p>
  );
};
const InputB = () => {
  const [text, setText] = useSharedText();
  return (
    <p>
      <input
        type="text"
        value={text}
        onInput={ev => setText(ev.target.value)}
      />
    </p>
  );
};
export default…