React useDebounce

npm create vite@latest

VITE_ACCESS_KEY="your key"VITE_SECRET_KEY="your key"

import { useState } from "react";import "./App.css";function App() {  return <div className="App"></div>;}export default App;

import { useState } from "react";import "./App.css";function App() {  const [searchTerm, setSearchTerm] = useState("");  return (    <div className="App">      <div>        <label htmlFor="search-input">Search Unsplash images</label>        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />      </div>    </div>  );}export default App;

import { useState, useEffect } from "react";import "./App.css";function App() {  const [searchTerm, setSearchTerm] = useState("");  const handleSearch = () => {    console.log("searching for", searchTerm);  };  useEffect(() => {    handleSearch();  }, [searchTerm]);  return (    <div className="App">      <div>        <label htmlFor="search-input">Search Unsplash images</label>        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />      </div>    </div>  );}export default App;

function useDebounce(value, delay) {  // value and delay in ms (1000ms = 1s)  // debounced values  const [debouncedValue, setDebouncedValue] = useState(value);  useEffect(    () => {      // Update debounced value after delay      const t = setTimeout(() => {        setDebouncedValue(value);      }, delay);      // clean up the timeout after value changes      return () => {        clearTimeout(t);      };    },    [value, delay] // re-run if value or delay changes  );  return debouncedValue;}export default useDebounce;

import { useState, useEffect } from "react";import "./App.css";import useDebounce from "./useDebounce";function App() {  const [searchTerm, setSearchTerm] = useState("");  const debouncedSearchTerm = useDebounce(searchTerm, 500);  const handleSearch = () => {    console.log("searching for", searchTerm);  };  useEffect(() => {    if (debouncedSearchTerm) {      handleSearch();    }  }, [debouncedSearchTerm]);  return (    <div className="App">      <div>        <label htmlFor="search-input">Search Unsplash images</label>        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />      </div>    </div>  );}export default App;

import { useState, useEffect } from "react";import "./App.css";import useDebounce from "./useDebounce";const API_URL = "https://api.unsplash.com/search/photos";function App() {  const [searchTerm, setSearchTerm] = useState("");  const [results, setResults] = useState([]);  const debouncedSearchTerm = useDebounce(searchTerm, 500);  const handleSearch = async () => {    const response = await fetch(      `${API_URL}?query=${debouncedSearchTerm}&client_id=${import.meta.env.VITE_ACCESS_KEY}`    );    const data = await response.json();    return data.results;  };  useEffect(() => {    if (debouncedSearchTerm) {      handleSearch().then((results) => setResults(results));    }  }, [debouncedSearchTerm]);  return (    <div className="App">      <div>        <label htmlFor="search-input">Search Unsplash images</label>        <input type="search" id="search-input" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />      </div>      <div>        {results?.map((result) => (          <img key={result.id} src={result.urls.small} alt={result.alt_description} />        ))}      </div>    </div>  );}export default App;