DEV Community

buchananwill
buchananwill

Posted on

Reusing state management: HOC vs Hook

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}
      />
    )
  );
}
Enter fullscreen mode Exit fullscreen mode

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],
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
ivangavlik profile image
ivan.gavlik

Nice explained