0xLDev

import { useState, useCallback } from "react";

export const useToggle = (initialState = false) => {
  const [state, setState] = useState(!!initialState);

  const toggle = useCallback(() => setState((prev) => !prev), []);

  return [state, toggle];
};

0xLDev

import { useEffect, useRef } from 'react';

export const useEventListener = (eventName, handler, element = window) => {
  const savedHandler = useRef();

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {

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) => {

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, 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 { 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 } 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, useState } from 'react';

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

export const useAsync = (asyncFunc) => {

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, 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);