How to start search only when user stops typing?

by

Implement using useEffect hook:

function Search() {
  const [searchTerm, setSearchTerm] = useState('')

  useEffect(() => {
    const delayDebounceFn = setTimeout(() => {
      console.log(searchTerm)
      // Send Axios request here
    }, 3000)

    return () => clearTimeout(delayDebounceFn)
  }, [searchTerm])

  return (
    <input
      autoFocus
      type="text"
      autoComplete="off"
      className="live-search-field"
      placeholder="Search here..."
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  )
}

More Related Contents:

  1. How to fix missing dependency warning when using useEffect React Hook
  2. How to push to History in React Router v4?
  3. How to get history on react-router v4?
  4. How to pass params into link using React router v6?
  5. Detect Route Change with react-router
  6. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  7. React Child Component Not Updating After Parent State Change
  8. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Set types on useState React Hook with TypeScript
  11. How to create helper file full of functions in react native?
  12. draftjs how to initiate an editor with content
  13. React Hooks: useEffect() is called twice even if an empty array is used as an argument
  14. Recommended approach for route-based tests within routes of react-router
  15. NextJs CORS issue
  16. How to use Private route in react-router-dom@v6
  17. Difference in the navigation (React Router v6)
  18. Class extends React.Component can’t use getInitialState in React
  19. React Hooks – Modified state not reflecting immediately
  20. react router v6 No routes matched location
  21. How do I type this ‘as’ JSX attribute in TypeScript?
  22. Passing object as props to jsx
  23. create-react-app: how to use https instead of http?
  24. Disable ESLint that create-react-app provides
  25. Webpack & Typescript image import
  26. How to import a .txt file from my source?
  27. How to listen to localstorage value changes in react?
  28. Why my render method is react called twice
  29. Put A Warning If Page Refresh in ReactJS
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment