{"id":11684,"library":"react-debounce-input","title":"React Debounced Input Component","description":"react-debounce-input is a React component that provides debounced `onChange` functionality for HTML input elements (like `<input>` or `<textarea>`) or any custom React component that follows the `value`/`onChange` prop pattern. It prevents excessive re-renders, state updates, or API calls during rapid user input by delaying the `onChange` callback until a specified `debounceTimeout` has elapsed since the last change. The current stable version is `3.3.0`, which added official React 18 support. The package maintains an active release cadence, addressing bug fixes, enhancing features (e.g., TypeScript support since v3.2.0, `inputRef` in v3.1.0), and keeping dependencies updated. Its primary differentiator is its straightforward, drop-in usability, enabling developers to easily integrate debouncing without writing custom logic, offering a simple alternative to more complex form libraries.","status":"active","version":"3.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/nkbt/react-debounce-input","tags":["javascript","component","react-component","react","input","debounce","throttle","typescript"],"install":[{"cmd":"npm install react-debounce-input","lang":"bash","label":"npm"},{"cmd":"yarn add react-debounce-input","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-debounce-input","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for the React component.","package":"react","optional":false}],"imports":[{"note":"The main component is provided as a named export. Attempting a default import will result in an undefined value at runtime.","wrong":"import DebounceInput from 'react-debounce-input';","symbol":"DebounceInput","correct":"import { DebounceInput } from 'react-debounce-input';"},{"note":"This type import allows for type-checking props when extending or creating wrappers around the DebounceInput component in TypeScript projects.","symbol":"DebounceInputProps","correct":"import type { DebounceInputProps } from 'react-debounce-input';"},{"note":"This CommonJS `require` syntax is for older Node.js environments or legacy build setups. Modern React applications typically use ESM `import` statements.","symbol":"DebounceInput (CommonJS)","correct":"const { DebounceInput } = require('react-debounce-input');"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { DebounceInput } from 'react-debounce-input';\n\ninterface AppState {\n  value: string;\n}\n\nconst App: React.FC = () => {\n  const [value, setValue] = useState<string>('');\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    console.log('Debounced onChange triggered:', event.target.value);\n    setValue(event.target.value);\n  };\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', padding: '20px' }}>\n      <h1>React Debounce Input Demo</h1>\n      <label htmlFor=\"debounced-input\" style={{ display: 'block', marginBottom: '10px' }}>\n        Type here (min 2 chars, 300ms debounce):\n      </label>\n      <DebounceInput\n        id=\"debounced-input\"\n        minLength={2}\n        debounceTimeout={300}\n        onChange={handleChange}\n        placeholder=\"Start typing...\"\n        style={{ width: '300px', padding: '8px', fontSize: '16px', border: '1px solid #ccc', borderRadius: '4px' }}\n      />\n\n      <p style={{ marginTop: '20px', fontSize: '1.1em' }}>\n        Current debounced value: <strong>{value}</strong>\n      </p>\n      <p style={{ color: '#666' }}>\n        This input will only update the displayed value after 300ms of no typing and when at least 2 characters have been entered.\n        Pressing Enter will also force a notification (by default).\n      </p>\n    </div>\n  );\n};\n\nconst appRoot = document.getElementById('app-root') || document.createElement('div');\nappRoot.id = 'app-root';\ndocument.body.appendChild(appRoot);\nReactDOM.render(<App />, appRoot);","lang":"typescript","description":"This quickstart demonstrates how to use `DebounceInput` with a functional React component, setting a minimum length and a debounce timeout. It also showcases state management for the debounced value."},"warnings":[{"fix":"Upgrade your React project to version 15.3.0 or higher. If you must support older React versions, use `react-debounce-input@2.x`.","message":"React versions older than 15.3.0 are no longer supported due to a major version update.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"To enable automatic debouncing, ensure `debounceTimeout` is set to a positive number (e.g., `300`). If `Enter`-only notification is intended, clearly communicate this behavior to users.","message":"Setting `debounceTimeout` to `-1` disables automatic debounced notifications completely. The `onChange` event will only be triggered when the `Enter` key is pressed.","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"Implement checks in your `onChange` handler to gracefully manage empty string values, especially when dealing with validation or search queries that expect a minimum length.","message":"When the `minLength` prop is specified, if the input's value becomes shorter than this minimum (e.g., by deleting characters), an `onChange` event will be triggered with an empty string (`''`) as its value.","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"When using `DebounceInput` with `element=\"textarea\"`, consider explicitly setting `forceNotifyByEnter={false}` if you want `Enter` to behave as a standard newline character without forcing an `onChange` notification.","message":"The `forceNotifyByEnter` prop defaults to `true`. This can lead to unexpected behavior for `<textarea>` elements, where users might expect to insert new lines with `Enter` without triggering an immediate `onChange` notification.","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"Upgrade to `react-debounce-input@3.0.1` or a newer version to ensure `onBlur` and `onKeyPress` props integrate seamlessly without unintended side effects on `onChange` notification.","message":"Prior to version 3.0.1, using `onBlur` or `onKeyPress` props could cause issues where notifications were not correctly forced or handled transparently.","severity":"breaking","affected_versions":"<3.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import { DebounceInput } from 'react-debounce-input';` to correctly import the named component.","cause":"Attempting to use `DebounceInput` without a correct named import or via an incorrect default import.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."},{"fix":"Upgrade your `react` and `react-dom` packages to a version compatible with `^15.3.0 || 16 || 17 || 18`. For example, `npm install react@18 react-dom@18`.","cause":"Your project's `react` version does not satisfy the `react-debounce-input` peer dependency requirements.","error":"npm ERR! ERESOLVE unable to resolve dependency tree ... peer react@\"^15.3.0 || 16 || 17 || 18\" from react-debounce-input@3.3.0"},{"fix":"Ensure the `event` parameter in your `onChange` handler is correctly typed, for example: `(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => ...`.","cause":"Incorrectly typing the `event` parameter in the `onChange` handler, especially if the `element` prop is used with a custom component.","error":"TypeScript Error: Property 'value' does not exist on type 'EventTarget' or 'ChangeEvent<HTMLInputElement>'"}],"ecosystem":"npm"}