// This is amazing.
// https://stackoverflow.com/a/79682810
import React, { useState, useRef } from 'react';

export default function DebounceInputDemo4useRef() {
    const [inputValue, setInputValue] = useState('');
    const [debounceValue, setDebouncedValue] = useState('');

    const timerId = useRef();

    const handleChange = (event) => {
        const serchItem = event.target.value;
        setInputValue(serchItem);

        const delay = 1000;
console.log("clear", timerId.current);
        clearTimeout(timerId.current);
        timerId.current = setTimeout(() => {
            console.log(timerId.current, serchItem); // necessary api calls
            setDebouncedValue(serchItem);
        }, delay);
console.log("CREATED", timerId.current);
    };

    return (
        <>
            <input type="text" value={inputValue} onChange={handleChange} placeholder='Type in quickly'/>
            <div>{debounceValue}</div>
        </>
    );
};