Reusing state management: HOC vs Hook

Published at

5/26/2024

Categories

4 categories in total

Author

12 person written this

buchananwill

open

I've been looking at alternative approaches to HoC wrappers, as the evolution of client/server components and React best practices has pushed the HoC pattern down the list of "good modularity patterns". As a comparative exercise, I took this wrapper, and re-wrote it as a hook, using useCallback and React.memo for re-render stability. The hook version seems more in line with modern React style, but otherwise doesn't seem to offer much over the HoC version. Has anyone else looked at these patterns, or otherwise have a better solution?

HoC:

"use client";

import { DtoUiComponent, Entity } from "../../types";
import React from "react";
import { useDtoStoreDispatchAndListener } from "../../hooks/main";
import { useDtoStoreDelete } from "../../hooks/main";

export function DtoComponentWrapper<T extends Entity>({
  entityClass,
  id,
  uiComponent: UiComponent,
}: {
  entityClass: string;
  id: string | number;
  uiComponent?: DtoUiComponent<T>;
}) {
  const { currentState, dispatchWithoutControl } =
    useDtoStoreDispatchAndListener<T>(
      id,
      entityClass,
      UiComponent?.name || "component",
    );
  const { dispatchDeletion, deleted } = useDtoStoreDelete(entityClass, id);

  return (
    UiComponent && (
      <UiComponent
        entity={currentState}
        entityClass={entityClass}
        dispatchWithoutControl={dispatchWithoutControl}
        deleted={deleted}
        dispatchDeletion={dispatchDeletion}
      />
    )
  );
}

Hook:

"use client";

import { DtoUiComponent, Entity } from "../../types";
import React, { memo, useCallback } from "react";
import {
  useDtoStoreDelete,
  useDtoStoreDispatchAndListener,
} from "../../hooks/main";

export function useDtoComponent<T extends Entity>(
  entityClass: string,
  UiComponent: DtoUiComponent<T>,
) {
  return useCallback(
    memo(({ id }: { id: string | number }) => {
      const { currentState, dispatchWithoutControl } =
        useDtoStoreDispatchAndListener<T>(
          id,
          entityClass,
          UiComponent?.name || "component",
        );
      const { dispatchDeletion, deleted } = useDtoStoreDelete(entityClass, id);

      return (
        UiComponent && (
          <UiComponent
            entity={currentState}
            entityClass={entityClass}
            dispatchWithoutControl={dispatchWithoutControl}
            deleted={deleted}
            dispatchDeletion={dispatchDeletion}
          />
        )
      );
    }),
    [entityClass, UiComponent],
  );
}

dev-resources.site

Reusing state management: HOC vs Hook