How to fix Warning: Received both `onChange` and `onInput` events for input in React

What this error means

React fires both onChange and onInput events when an input's value changes, but these handlers are often used redundantly. In React's virtual DOM, both onChange and onInput are automatically normalized to the same internal event type. When you attach both handlers to the same input element, React processes both, potentially executing the same logic twice or causing confusing behavior. This warning exists to help developers avoid unnecessary complexity and performance issues from duplicate event handlers. In vanilla JavaScript, onChange fires when focus is lost, while onInput fires immediately on each keystroke. However, React abstracts this difference and treats onChange as the standard way to handle input value changes across all input types. By attaching both, you're likely doing redundant work and may end up with bugs where logic accidentally runs twice.

Typical symptoms

• Console shows warning "Warning: Received both `onChange` and `onInput` events for input"
• Input event handlers fire twice for a single keystroke
• State updates appear to happen multiple times when you type
• Form validation or side effects triggered twice per character entered
• Difficult to debug because handlers are executing more than expected
• Performance degradation when typing in large forms with many inputs

Common causes

1. Attaching both onChange and onInput handlers to the same input element
2. Migrating code from vanilla JavaScript where onInput and onChange have different behaviors
3. Copy-pasting input elements from different sources and forgetting to consolidate handlers
4. Misunderstanding React's event normalization and thinking onChange only fires on blur
5. Using third-party UI libraries that attach onInput while you attach onChange
6. Accidentally defining both handlers in component class instances or functional components

How to fix "Warning: Received both `onChange` and `onInput` events for input"

// ❌ WRONG - both handlers attached
function InputForm() {
  const [value, setValue] = useState('');
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  
  const handleInput = (e) => {
    setValue(e.target.value);
  };
  
  return (
    <input
      value={value}
      onChange={handleChange}
      onInput={handleInput}  // Duplicate!
    />
  );
}

// ✅ CORRECT - only onChange
function InputForm() {
  const [value, setValue] = useState('');
  
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  
  return (
    <input
      value={value}
      onChange={handleChange}
    />
  );
}

// ❌ WRONG - split logic
function SearchInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const handleChange = (e) => {
    const val = e.target.value;
    setQuery(val);
  };
  
  const handleInput = (e) => {
    const val = e.target.value;
    // Perform search
    setResults(performSearch(val));
  };
  
  return (
    <input
      value={query}
      onChange={handleChange}
      onInput={handleInput}  // Duplicate logic
    />
  );
}

// ✅ CORRECT - combined logic
function SearchInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  const handleChange = (e) => {
    const val = e.target.value;
    setQuery(val);
    setResults(performSearch(val));
  };
  
  return (
    <input
      value={query}
      onChange={handleChange}
    />
  );
}

// Custom input wrapper that handles events
function CustomInput({ onChange, onInput, ...props }) {
  // ❌ If component internally attaches onInput, don't pass onInput from parent
  return (
    <input
      onChange={onChange}
      {...props}
    />
  );
}

// Usage - only provide onChange
function MyForm() {
  const [value, setValue] = useState('');
  
  return (
    <CustomInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      // Don't provide onInput
    />
  );
}

const handleChange = (e) => {
  console.log('onChange fired', e.target.value); // Should log once per keystroke
  setValue(e.target.value);
};

# Search for other instances of both onChange and onInput
grep -r "onChange.*onInput" src/
grep -r "onInput.*onChange" src/

Advanced notes

Frequently asked questions

What does "Warning: Received both `onChange` and `onInput` events for input" mean?

React fires both onChange and onInput events when an input's value changes, but these handlers are often used redundantly. In React's virtual DOM, both onChange and onInput are automatically normalized to the same internal event type. When you attach both handlers to the same input element, React processes both, potentially executing the same logic twice or causing confusing behavior.

How do I fix "Warning: Received both `onChange` and `onInput` events for input"?

React warns when an input element has both onChange and onInput event handlers because they serve the same purpose and can cause duplicate event handling. In React, onChange handles text input changes, making onInput redundant. Removing the duplicate handler simplifies code and eliminates the warning.

What causes "Warning: Received both `onChange` and `onInput` events for input"?

Attaching both onChange and onInput handlers to the same input element Migrating code from vanilla JavaScript where onInput and onChange have different behaviors Copy-pasting input elements from different sources and forgetting to consolidate handlers

Is the "Warning: Received both `onChange` and `onInput` events for input" error serious?

It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Cannot access property of undefined

  How to fix "Cannot access property of undefined" in React

  HIGH

• Babel plugin for JSX is not installed

  How to fix "Babel plugin for JSX is not installed" in React

  HIGH

• Cannot find module 'react'

  How to fix "Cannot find module 'react'" in React

  HIGH

• Cannot access "this" in arrow function outside of class component context

  How to fix "Cannot access this in arrow function" in React

  HIGH

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation
• 📖
  React input element documentation(Official Docs)
• 📖
  MDN: input event vs change event(Official Docs)
• Stack Overflow: onChange vs onInput in React
• Bobby Hadz: React input onChange vs onInput
• W3Schools: change event reference