Reusing state management: HOC vs Hook

#react #state #modularity #patterns

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],
  );
}

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →