Uma alternativa do React para o window.setInterval

useInterval

Um hook de debounce escrito com javascript moderno e com hooks do React

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

const useDebounce = (value: string, delay: number): string => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => {
      clearTimeout(handler);
    };
  }, [value]);

  return debouncedValue;
};

export default useDebounce;


useDebounce

import React, { useEffect } from 'react'

export default function useResizer() {
  const windowExists = typeof window !== 'undefined'
  const [isMobile, setIsMobile] = React.useState( windowExists && window.innerWidth < 575)

  useEffect(() => {
    function handleSizeChange() {
      return setIsMobile( windowExists && window.innerWidth < 575)
    }

    if(windowExists){
      window.addEventListener('resize', handleSizeChange)
    }

    return () => {
      if(windowExists){
        window.removeEventListener('resize', handleSizeChange)
      }
    }
  }, [isMobile, windowExists])

  return [isMobile]
}