React hooks

use-debounced-value.ts

import {useEffect, useRef, useState} from 'react';
import {debounce} from 'lodash';

export function useDebouncedValue<V>(value: V, wait: number) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  const debounceRef = useRef<typeof setDebouncedValue>();

  useEffect(() => {
    const debounceFn = debounce(setDebouncedValue, wait);
    debounceRef.current = debounceFn;
    return function cleanup() {
      debounceFn.cancel();
    };
  }, [wait]);

  debounceRef.current?.(value);
  return debouncedValue;
}

use-imports.ts

import {useEffect, useState} from 'react';

export function useImports<T extends readonly unknown[]>(
  initializeImports: () => T
) {
  const [imports, setImports] = useState<
    {
      -readonly [P in keyof T]:
        | (T[P] extends PromiseLike<infer U> ? U : T[P])
        | undefined;
    }
  >([] as any);

  useMountEffect(() => {
    const importsArray = initializeImports();
    Promise.allSettled(importsArray).then((res) => {
      setImports(
        res.map((x) => (x.status === 'fulfilled' ? x.value : undefined)) as any
      );
    });
  });

  return imports;
}

function useMountEffect(fun: () => void) {
  useEffect(fun, []);
}

use-intersect.ts

import {useEffect, useRef, useState} from 'react';

type Props = {root: Element | null; rootMargin: string; threshold: number};

// from https://medium.com/the-non-traditional-developer/how-to-use-an-intersectionobserver-in-a-react-hook-9fb061ac6cb5
// https://codesandbox.io/s/04vvrxj79p
export function useIntersect(
  root: Element | null,
  rootMargin: string,
  threshold = 0
) {
  const [entry, updateEntry] = useState({} as IntersectionObserverEntry);
  const [node, setNode] = useState<Element | null>(null);

  const observer = useRef(
    new window.IntersectionObserver(([entry]) => updateEntry(entry), {
      root,
      rootMargin,
      threshold,
    })
  );

  useEffect(() => {
    const {current: currentObserver} = observer;
    currentObserver.disconnect();

    if (node) currentObserver.observe(node);

    return () => currentObserver.disconnect();
  }, [node]);

  return [setNode, entry];
}