Modern HOCs with Hooks and Context API

Dennis Kaffer — Wed, 29 Sep 2021 17:57:10 +0000

Using the Context API sometimes makes us do some abstractions to avoid repeating code declarations, It's possible to have abstractions only with hooks too, but we can have a similar result with more composition with HOCs.

For example, here we have a common context that we'll integrate with a HOC:

import {
  createContext,
  useReducer,
  useMemo,
  useContext,
  ReactNode
} from "react";

type ContextProps = {
  isLoading: boolean;
  showError: boolean;
};

export type GlobalContextProps = {
  state: ContextProps;
  dispatch: (a: Action) => void;
};

const initialState: ContextProps = {
  isLoading: false,
  showError: false
};

export enum ACTIONS {
  IS_LOADING = "IS_LOADING",
  SHOW_ERROR = "SHOW_ERROR"
}

export type Action = {
  type: ACTIONS;
  payload: boolean;
};

export const GlobalContext = createContext<GlobalContextProps>({
  state: initialState,
  dispatch: () => {}
});

const reducer = (state: ContextProps, action: Action) => {
  const { type, payload } = action;
  switch (type) {
    case ACTIONS.IS_LOADING:
      return {
        ...state,
        isLoading: payload
      };
    case ACTIONS.SHOW_ERROR:
      return {
        ...state,
        showError: payload
      };
    default:
      return state;
  }
};

interface IGlobalProvider {
  children: ReactNode;
}

export const GlobalProvider = ({ children }: IGlobalProvider) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const store = useMemo(() => ({ state, dispatch }), [state, dispatch]);

  return (
    <GlobalContext.Provider value={store}>
     {children}
    </GlobalContext.Provider>
  );
};

export const GlobalConsumer = GlobalContext.Consumer;

export const useGlobal = () => {
  const context = useContext(GlobalContext);
  if (!context) {
    throw new Error("useGlobal must be used after an GlobalContext.Provider");
  }
  return context;
};

Using HOC as a Context API container

Here we have an example of how to abstract the useGlobal hook from the context and add some new functions like requestHandler who is responsible to make requests and update the state of context.
We can encapsulate all the context updates and make selectors for complex states.

import { FC, useCallback } from "react";
import { useGlobal, ACTIONS, GlobalContextProps } from "../contexts/global";

export interface IGlobal extends GlobalContextProps {
  requestHandler: (requestFunction: () => Promise<void>) => void
}

interface IWrappedComponent {
  global: IGlobal;
}

export const withGlobal = (WrappedComponent: FC<IWrappedComponent>) => {
  const HOC = () => {
    const { state, dispatch } = useGlobal();

    const requestHandler = useCallback(
      async (requestFunction) => {
        try {
          dispatch({ type: ACTIONS.IS_LOADING, payload: true });
          return await requestFunction();
        } catch (error) {
          dispatch({ type: ACTIONS.SHOW_ERROR, payload: true });
        } finally {
          dispatch({ type: ACTIONS.IS_LOADING, payload: false });
        }
      },
      [dispatch]
    );

    const props: IGlobal = {
      state,
      dispatch,
      requestHandler
    };

    return <WrappedComponent global={props} />;
  };

  return HOC;
};

HOC usage

To use the HOC above we just call withGlobal function and pass the component as a param.

import { useCallback, useEffect, useState } from "react";
import { withGlobal, IGlobal } from "../hoc/withGlobal";

interface IProps {
  global: IGlobal;
}

const url = "https://hacker-news.firebaseio.com/v0";

const Page = ({ global: { requestHandler } }: IProps) => {
  const [posts, setPosts] = useState<any>([]);

  const getPosts = useCallback(
    () =>
      requestHandler(async () => {
        const response = await fetch(`${url}/topstories.json`);
        const data = await response.json();
        const requests = data.slice(0, 10).map(async (id: number) => {
          const post = await fetch(`${url}/item/${id}.json`);
          return await post.json();
        });

        const result = await Promise.all(requests);
        setPosts(result);
      }),
    [requestHandler]
  );

  useEffect(() => {
    getPosts();
  }, [getPosts]);

  return (
    <div className="App">
      <h1>Top 10 articles of Hacker News</h1>
      <ul>
        {posts.map((p: any) => (
          <li key={p.id}>
            <a href={p.url} title={p.title}>
              {p.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default withGlobal(Page);

In the Page component we can use all withGlobal features and we can focus on logical and render issues.
Using HOC in this case gave us a cleaner code and we don't need to worry about updating the global state.

Example in CodeSandbox

Conclusion

HOCs can be very useful to avoid code replication and calling the dispatch function too many times, they can be used as a bridge for components and context.
It's necessary to analyze the performance and if using HOCs in the application makes sense, in the vast majority of cases HOCs are usually a good choice.

In some future post I'll show you how to chain multiple HOCs and avoid props collisions. Thank you for reading.

ReactGA Custom Hook

Dennis Kaffer — Mon, 14 Sep 2020 03:48:56 +0000

First install ReactGA

npm install react-ga --save

After install, add react-ga in your project, you can do the configuration whatever you want, here is just an example in index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactGA.initialize('UA-#########-#');

ReactDOM.render(<App />, document.getElementById('root'));

The hook code

The hook code folder/file example utils/googleAnalytics.js.

import { useEffect } from 'react';
import ReactGA from 'react-ga';

export const makePageView = (pageName) => 
 ReactGA.pageview(pageName);

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
  }, [pageName]);

Using in some component

import React from 'react';
import { useAnalytics } from 'utils/googleAnalytics';

const SomePageComponent = () => {
 useAnalytics('some-page');
 return(...)
}

Tests

To make sure that your tests don't break, add this clearAnalytics function.

export const clearAnalytics = () => {
  ReactGA.initialize('dummy', { testMode: true });
  ReactGA.testModeAPI.resetCalls();
};

describe('SomePageComponent test', () => {
  beforeEach(() => {
    clearAnalytics();
    ...
  });

Why do it that way?

Doing it this way can be a bit more work, but we can have more control and add specific behaviors for the component, for example I would like to make a metric of how long the user stayed on the page, we could put this treatment in the unmount of our hook who will know when the component is unmounted.

export const useAnalytics = pageName =>
  useEffect(() => {
    makePageView(pageName);
    return () => getPageTime(pageName);
  }, [pageName]);

Conclusion

The possibilities of increasing this hook are almost endless, I demonstrated it this way because I found it simpler, I hope I helped in something.

Forem: Dennis Kaffer

Modern HOCs with Hooks and Context API

Using HOC as a Context API container

HOC usage

Example in CodeSandbox

Conclusion

ReactGA Custom Hook

First install ReactGA

The hook code

Using in some component

Tests

Why do it that way?

Conclusion