Top React Hooks — Sync and Async State

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.

Redhooks

The Redhooks is a React library for creating a state container in our React apps.

To install it, we can run:

npm install --save redhooks

Then we can use it by writing:

import React from "react";
import Provider, { createStore, combineReducers, useStore } from "redhooks";

const counter = (state = 0, { type, payload }) => {
  switch (type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

const rootReducer = combineReducers({ counter });
const store = createStore(rootReducer);

const Counter = () => {
  const { state, dispatch } = useStore();

  return (
    <div>
      <p>{state.counter}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>increment</button>
      <button
        onClick={() => setTimeout(() => dispatch({ type: "DECREMENT" }), 3000)}
      >
        decrement
      </button>
    </div>
  );
};

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

We created the counter reducer like any other Redux reducer.

Then we pass that into the combineReducer function to return the rootReducer .

And we pass that into the createStore function to create the store.

Next, we create a Counter component that uses the useStore hook to get the state and dispatch variables.

state has the state.

dispatch is a function for dispatching actions.

We get the property from the state to get the state we want.

In App , we wrap the Provider component around our app and we set the store prop to our store so that we can use it.

It also integrates with React Router and we can use Redux middleware like redux-thunk and redux-saga with it.

region-core

We can use the region-core library to manage our state in our React components.

To install it, we can run:

npm i region-core

Then we can use it by writing:

import React from "react";
import { createRegion } from "region-core";

const region = createRegion("foo");

const handleChange = e => region.set(e.target.value);

export default function App() {
  const value = region.useValue();
  return <input value={value} onChange={handleChange} />;
}

We call the createRegion to create our state with an initial value.

Then we can use the returned region object to set the value of the state with region.set .

And we can get the value of the state with region.useValue .

We can also use the loadBy function to load async data.

For instance, we can write:

import React from "react";
import { createRegion } from "region-core";

const region = createRegion();

const asyncFuncion = async ({ name }) => {
  const res = await fetch(`https://api.agify.io/?name=${name}`);
  const data = await res.json();
  return data;
};

const loadUser = region.loadBy(asyncFuncion);

loadUser({ name: "michael" });

export default function App() {
  const { loading, error, fetchTime, value } = region.useProps();

  return (
    <div>
      <div>{JSON.stringify(value)}</div>
      <p>{loading}</p>
      <p>{error}</p>
      <p>{fetchTime}</p>
    </div>
  );
}

We call loadBy with an async function to load data asynchronously with it.

Then we can use the useProps method to get the data.

loading has the loading state.

error has the error if they exist.

fetchTime has the timestamp when the data is fetched.

value has the data resolved by the async function.

Conclusion

Redhooks is a state management solution similar to Redux.

region-core is a state management library for internal state.