Top React Hooks — Refs, Redux, and Async

Photo by Dan Gold 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.

reactive-react-redux

The reactive-react-redux library is an alternative library to React-Redux for using Redux stores in our React app.

To use it, we install it by running:

npm install reactive-react-redux

Then we can use it by writing:

import React from "react";
import { createStore } from "redux";
import { Provider, useDispatch, useTrackedState } from "reactive-react-redux";
const initialState = {
  count: 0
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + 1 };
    case "decrement":
      return { ...state, count: state.count - 1 };
    case "setText":
      return { ...state, text: action.text };
    default:
      return state;
  }
};
const store = createStore(reducer);
const Counter = () => {
  const state = useTrackedState();
  const dispatch = useDispatch();
  return (
    <div>
      <span>Count…