Conceptual Hooks

Button.tsx

// Presentational Component
// contains only the UI and has a clear UI (props) for testing

import React from "react";
import Loader from "../Loader";

const Button = ({ onFocus, onBlur, hasLoader, label }) => (
  <button type="button" onFocus={onFocus} onBlur={onBlur}>
    {hasLoader ? <Loader /> : label}
  </button>
);

export default Button;

index.tsx

// Higher-Order Component
// contains the state and life-cycle behavior of the component

import React, { FunctionComponent, useState, useCallback } from "react";
import Button from "./Button";
import useHasLoader from "./hooks/useHasLoader";

interface Props {
  isLoading: boolean;
}

const withButton = (
  Component: FunctionComponent<any>
): FunctionComponent<Props> => ({ isLoading, ...props }) => {
  const [hasFocus, setHasFocus] = useState<boolean>(false);
  const [hasLoader, setHasLoader] = useState<boolean>(false);
  const handleFocus = useCallback(() => {
    setHasFocus(true);
  }, []);
  const handleBlur = useCallback(() => {
    setHasFocus(false);
  }, []);

  useHasLoader({
    isLoading,
    hasFocus,
    setHasLoader
  });

  return (
    <Component
      hasLoader={hasLoader}
      onFocus={handleFocus}
      onBlur={handleBlur}
      {...props}
    />
  );
};

export default withButton(Button);

useHasLoader.ts

// Custom Hook for logic

import { useEffect } from "react";

const useHasLoader = ({ isLoading, hasFocus, setHasLoader }) => {
  useEffect(() => {
    if (isLoading && !hasFocus) {
      return setHasLoader(true);
    }

    return setHasLoader(false);
  }, [isLoading, hasFocus, setHasLoader]);
};

export default useHasLoader;