hyber1z0r

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

const useTimeout = (callback: () => void, delay: number | null) => {
  const savedCallback = useRef(callback);

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

  useEffect(() => {

hyber1z0r

import React, { useEffect, useState, useRef } from 'react';
import useWhenVisible from './useWhenVisible';

const TodoList = () => {
  const limit = 25;
  const [offset, setOffset] = useState(0);
  const [todos, setTodos] = useState([]);
  const lastEl = useRef();

  useEffect(() => {

hyber1z0r

import React, { useEffect } from 'react';

const useWhenVisible = (target: Element | undefined,
                        callback: () => void,
                        root: Element | undefined = document.body) => {
  useEffect(() => {
    if (!target || !root) {
      return;
    }
    

hyber1z0r

import { useState, useEffect } from 'react';

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

hyber1z0r

import React, { useState, useEffect } from 'react';
import useDebounce from './useDebounce';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);
  
  // ✅ Use debounce hook to debounced searchTerm as it is rapidly changing
  const debouncedSearchTerm = useDebounce(searchTerm, 500);