0xLDev

import { useEffect, useRef } from 'react';

export const useMountedRef = () => {
  const isMountedRef = useRef(true);

  useEffect(() => {
    const beforeUnmount = () => {
      isMountedRef.current = false;
    };
    return beforeUnmount;

0xLDev

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

export const useInterval = (callback, delay) => {
  const callbackRef = useRef(callback);
  const [intervalHandle, setIntervalHandle] = useState(null);
  const [trigger, setTrigger] = useState();

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

0xLDev

import { useCallback, useEffect, useState } from 'react';
import { useEventListener } from 'useEventListener';

const DEFAULT_SIZE = {
  width: 0,
  height: 0,
};

export const useElementSize = (elementRef) => {
  const [size, setSize] = useState(DEFAULT_SIZE);

0xLDev

import { useEffect, useRef } from 'react';

export const usePrevious = (value) => {
  const refContainer = useRef(value);

  useEffect(() => {
    refContainer.current = value;
  }, [value]);

  return refContainer.current;

0xLDev

import { useCallback, useState } from 'react';

export const ASYNC_STATUS = {
  IDLE: 'idle',
  PENDING: 'pending',
  SUCCESS: 'success',
  ERROR: 'error',
};

export const useAsync = (asyncFunc) => {

0xLDev

import { useEffect, useState } from 'react';

export const useAnimatedText = (text, delayMs) => {
  const [currentPos, setCurrentPos] = useState(0);

  useEffect(() => {
    const intervalHandle = setInterval(() => {
      setCurrentPos((pos) => {
        const isLast = pos === text.length - 1;
        return isLast ? 0 : pos + 1;

0xLDev

import { useCallback, useEffect, useState } from 'react';
import { useEventListener } from 'useEventListener';

const INITIAL_SIZE = [0, 0];

export const useWindowSize = () => {
  const [size, setSize] = useState(INITIAL_SIZE);

  useEffect(() => {
    const { innerWidth, innerHeight } = window;

0xLDev

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

export const useThrottle = (value, delay) => {
  const [throttledValue, setThrottledValue] = useState(value);
  const valueRef = useRef(value);

  useEffect(() => {
    valueRef.current = value;
  }, [value]);

0xLDev

import { useEffect, useState } from 'react';

export const useDebounce = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timeoutHandle = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

0xLDev

import { useEffect, useRef } from 'react';

export const useWhatCausedRender = (name, props) => {
  const prevPropsRef = useRef({});
  useEffect(() => {
    const changes = [];
    const prevProps = prevPropsRef.current;
    const keySet = new Set([...Object.keys(prevProps), ...Object.keys(props)]);

    keySet.forEach((key) => {