react#EffectCallback TypeScript Examples

export function useChangeEffect(callback: EffectCallback, deps?: DependencyList): void {
  const isFirstRun = useRef(true)
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false
      return
    }
    callback()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}

export function usePreEffect(callback: EffectCallback, deps?: DependencyList): boolean {
  const hasFirstRun = useRef(false)

  useEffect(() => {
    hasFirstRun.current = true
    callback()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)

  return hasFirstRun.current
}

export function useEffectExceptOnMount(effect: EffectCallback, deps?: DependencyList): void {
  const firstUpdate = useRef(true);

  useEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    return effect();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}

function useThrottleEffect(effect: EffectCallback, deps?: DependencyList, options?: Options) {
  const [flag, setFlag] = useState({});

  const { run, cancel } = useThrottleFn(() => {
    setFlag({});
  }, options);

  useEffect(() => {
    return run();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  React.useEffect(cancel, []);

  useUpdateEffect(effect, [flag]);
}

function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
  const isFirst = useIsFirstRender()

  useEffect(() => {
    if (!isFirst) {
      return effect()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps)
}

useUpdateEffect = (effect: EffectCallback, deps?: DependencyList) => {
  const isFirstRef = useRef(true);

  if (isFirstRef.current) {
    isFirstRef.current = false;
  }

  useEffect(() => {
    if (!isFirstRef.current) {
      return effect();
    }
  }, deps);
}

useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
  if (process.env.NODE_ENV !== 'production') {
    if (!(deps instanceof Array) || !deps.length) {
      console.warn(
        '`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
      );
    }

    if (deps.every(isPrimitive)) {
      console.warn(
        '`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
      );
    }
  }

  useCustomCompareEffect(effect, deps, isDeepEqual);
}

useCustomCompareEffect = <TDeps extends DependencyList>(
  effect: EffectCallback,
  deps: TDeps,
  depsEqual: DepsEqualFnType<TDeps>,
) => {
  if (process.env.NODE_ENV !== 'production') {
    if (!(deps instanceof Array) || !deps.length) {
      console.warn(
        '`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.',
      );
    }

    if (deps.every(isPrimitive)) {
      console.warn(
        '`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead.',
      );
    }

    if (typeof depsEqual !== 'function') {
      console.warn(
        '`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list',
      );
    }
  }

  const ref = useRef<TDeps | undefined>(undefined);

  if (!ref.current || !depsEqual(deps, ref.current)) {
    ref.current = deps;
  }

  useEffect(effect, ref.current);
}

/**
 * Exactly like React's `useEffect`, but skips initial render. Tries to
 * reproduce `componentDidUpdate` behavior.
 *
 * @see https://stackoverflow.com/questions/53179075/with-useeffect-how-can-i-skip-applying-an-effect-upon-the-initial-render/53180013#53180013
 */
export function useDidUpdateEffect(fn: EffectCallback, inputs?: DependencyList): void {
  const didMountRef = useRef(false);

  return useEffect(() => {
    if (didMountRef.current) fn();
    else didMountRef.current = true;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, inputs);
}

/**
 * Effect hook that ignores the first render (not invoked on mount).
 *
 * @param effect Effector to run on updates
 * @param deps Dependencies list, as for `useEffect` hook
 */
export function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void {
  const isFirstMount = useFirstMountState();

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(isFirstMount ? noop : effect, deps);
}

export function useDidMount(effect: EffectCallback): void {
    return useEffect(effect, []);
}

useEffectOnce = (effect: EffectCallback) => {
    // eslint-disable-next-line
    useEffect(effect, []);
}

function useEffectOnce(effect: EffectCallback) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(effect, [])
}

useEffectOnce = (effect: EffectCallback) => {
  useEffect(effect, []);
}

useEffectOnce = (effect: EffectCallback) => {
  useEffect(effect, []);
}

describe('useConditionalEffect', () => {
  it('should be defined', () => {
    expect(useConditionalEffect).toBeDefined();
  });

  it('should render', () => {
    const { result } = renderHook(() => useConditionalEffect(() => {}, undefined, []));
    expect(result.error).toBeUndefined();
  });

  it('by default should invoke effect only in case all conditions are truthy', () => {
    const spy = jest.fn();
    const { rerender } = renderHook(({ cond }) => useConditionalEffect(spy, undefined, cond), {
      initialProps: { cond: [1] as unknown[] },
    });
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [0, 1, 1] });
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [1, {}, null] });
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [true, {}, [], 25] });
    expect(spy).toHaveBeenCalledTimes(2);
  });

  it('should not be called on mount if conditions are falsy', () => {
    const spy = jest.fn();
    renderHook(({ cond }) => useConditionalEffect(spy, undefined, cond), {
      initialProps: { cond: [null] as unknown[] },
    });
    expect(spy).toHaveBeenCalledTimes(0);
  });

  it('should invoke callback only if deps are changed and conditions match predicate', () => {
    const spy = jest.fn();
    const { rerender } = renderHook(({ cond, deps }) => useConditionalEffect(spy, deps, cond), {
      initialProps: { cond: [false] as unknown[], deps: [1] as any[] },
    });
    expect(spy).toHaveBeenCalledTimes(0);

    rerender({ cond: [false], deps: [2] });
    expect(spy).toHaveBeenCalledTimes(0);

    rerender({ cond: [true], deps: [2] });
    expect(spy).toHaveBeenCalledTimes(0);

    rerender({ cond: [true], deps: [3] });
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [true], deps: [3] });
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [true], deps: [4] });
    expect(spy).toHaveBeenCalledTimes(2);

    rerender({ cond: [false], deps: [5] });
    expect(spy).toHaveBeenCalledTimes(2);
  });

  it('should apply custom predicate', () => {
    const spy = jest.fn();
    const predicateSpy = jest.fn((conditions) => truthyOrArrayPredicate(conditions));
    const { rerender } = renderHook(
      ({ cond }) => useConditionalEffect(spy, undefined, cond, predicateSpy),
      {
        initialProps: { cond: [null] as unknown[] },
      }
    );
    expect(predicateSpy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledTimes(0);

    rerender({ cond: [true, {}, [], 25] });
    expect(predicateSpy).toHaveBeenCalledTimes(2);
    expect(spy).toHaveBeenCalledTimes(1);

    rerender({ cond: [true, false, 0, null] });
    expect(predicateSpy).toHaveBeenCalledTimes(3);
    expect(spy).toHaveBeenCalledTimes(2);

    rerender({ cond: [undefined, false, 0, null] });
    expect(predicateSpy).toHaveBeenCalledTimes(4);
    expect(spy).toHaveBeenCalledTimes(2);
  });

  it('should accept custom hooks and pass extra args to it', () => {
    const callbackSpy = jest.fn();
    const effectSpy = jest.fn(
      (cb: EffectCallback, deps: DependencyList | undefined, _num: number) =>
        useUpdateEffect(cb, deps)
    );
    const { rerender } = renderHook(() =>
      useConditionalEffect(callbackSpy, undefined, [true], truthyAndArrayPredicate, effectSpy, 123)
    );

    expect(callbackSpy).not.toHaveBeenCalled();
    expect(effectSpy).toHaveBeenCalledTimes(1);
    expect(effectSpy.mock.calls[0][2]).toBe(123);

    rerender();

    expect(callbackSpy).toHaveBeenCalledTimes(1);
  });
});