React useRef

Refs are escape hatches. Try to avoid using them where possible.

Ref Forwarding

Ref forwarding is a technique for automatically passing a ref through a component to one of its children.

Use when making a reusable componenent such as a custom button or custom input.

Reference:

• Generic Forward Refs
• Cheatsheet
• Cleaning up the DOM with Forward Ref

Deferred Promise

Creating a deferred promise hook in React

// DeferredPromise.tsx
import { useRef } from 'react';

type DeferredPromise<DeferType> = {
  resolve: (value: DeferType) => void;
  reject: (value: unknown) => void;
  promise: Promise<DeferType>;
};

export function useDeferredPromise<DeferType>() {
  const deferRef = useRef<DeferredPromise<DeferType>>(null);

  const defer = () => {
    const deferred = {} as DeferredPromise<DeferType>;

    const promise = new Promise<DeferType>((resolve, reject) => {
      deferred.resolve = resolve;
      deferred.reject = reject;
    });

    deferred.promise = promise;
    deferRef.current = deferred;
    return deferRef.current;
  };

  return { defer, deferRef: deferRef.current };
}

caution

When you defer a promise, never forget to resolve or reject it, otherwise you may encounter memory leak problems