useLayoutTargetEffect

It's similar to useTargetEffect, except it uses useIsomorphicLayoutEffect internally.

API

function useLayoutTargetEffect(
  effect: React.EffectCallback,
  deps: React.DependencyList,
  targets: ReadonlyArray<EffectTarget<any>>
): void;

type Nullable<T> = T | undefined | null;
type EffectTarget<T> =
  | Nullable<T>
  | (() => Nullable<T>)
  | { current: Nullable<T> };

Example

import React, { useRef } from "react";
import { useLayoutTargetEffect } from "@lilib/hooks";

function Example() {
  const domRef = useRef<HTMLDivElement>(null);

  useLayoutTargetEffect(
    () => {
      // Do something.
    },
    [],
    [domRef]
  );

  return <div ref={domRef}>...</div>;
}