Top React Hooks — Shared Data and Default 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.

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 function App() {
  return (
    <SharedTextProvider>
      <InputA />
      <InputB />
    </SharedTextProvider>
  );
}

We called createStateContext to create the context and hook to use the context.

Then we created 2 components that use the useSharedText hook to get and set the shared state.

The SharedTextProvider is used by wrapping around the components that use the useSharedText hook so we can use the state in both components.

The provider takes the initialValue prop to let us set the initial value of the shared state.

We can write:

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 function App() {
  return (
    <SharedTextProvider initialValue="abc">
      <InputA />
      <InputB />
    </SharedTextProvider>
  );
}

to use it.

Then we’ll see ‘abc’ in both components.

useDefault

The useDefault hook returns the default when the state is null or undefined .

For instance, we can write:

import React from "react";
import { useDefault } from "react-use";

export default function App() {
  const initialUser = { name: "james" };
  const defaultUser = { name: "mary" };
  const [user, setUser] = useDefault(defaultUser, initialUser);

  return (
    <div>
      <div>User: {user.name}</div>
      <input onChange={e => setUser({ name: e.target.value })} />
      <button onClick={() => setUser(null)}>set to null</button>
    </div>
  );
}

to use the useDefault hook.

The first argument is used for the default value.

It’ll be the value of user when we set it to null .

The initialUser is set as the value of user when our component mounts.

When we type in something, then the user will be replaced with what’s typed in.

useGetSet

The useGetSet hook lets us get and set a state value.

For instance, we can write:

import React from "react";
import { useGetSet } from "react-use";

export default function App() {
  const [get, set] = useGetSet(0);
  const onClick = () => {
    set(get() + 1);
  };

  return <button onClick={onClick}>Clicked: {get()}</button>;
}

The useGetSet hook takes an initial value.

And it returns with the get and set functions to get and set the state data respectively.

Conclusion

The react-use library lets us create a context to share data and get and set data in various ways.