onChange is the React event prop for detecting when a form input's value has changed, firing on essentially every keystroke or selection change, unlike the native DOM 'change' event's more limited timing.

Syntax

<input value={value} onChange={handleChange} />

Deep Dive Course

In React, onChange fires immediately as a controlled input's value changes, functionally closer to the native DOM's input event than its actual change event, which normally only fires once an input loses focus after its value changed. This makes onChange the standard way to keep a piece of React state continuously synchronized with an input's current value in a controlled component pattern, reading the new value from event.target.value inside the handler and passing it to a state setter on every change.

1Understanding onChange

💡

React's onChange behaves like the native input event, firing on every keystroke, not like the native DOM change event, which normally only fires once focus leaves the field — this distinction matters if you're translating expectations from vanilla JavaScript DOM events.

editor.html

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  const handleChange = (event) => setName(event.target.value);
  return (
    <>
      <input value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </>
  );
}

localhost:3000

2Practical Example

Here is a real-world application of onChange showing how it is used in production React code.

editor.html

import { useState } from 'react';

function Subscribe() {
  const [checked, setChecked] = useState(false);
  const handleChange = (event) => setChecked(event.target.checked);
  return <input type="checkbox" checked={checked} onChange={handleChange} />;
}

localhost:3000

3Best Practices

Follow these guidelines when working with onChange:

1. Read the new value from event.target.value inside an onChange handler and pass it directly to a state setter, for the standard controlled-input pattern

2. Pair a controlled input's value prop with its onChange handler together — a value prop without an onChange handler makes the input read-only and typically triggers a React warning

3. Use event.target.checked instead of event.target.value specifically for checkbox and radio inputs, since their relevant changed property is a boolean, not a string

⚠️

Tip: React's onChange behaves like the native input event, firing on every keystroke, not like the native DOM change event, which normally only fires once focus leaves the field — this distinction matters if you're translating expectations from vanilla JavaScript DOM events.

editor.html

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  const handleChange = (event) => setName(event.target.value);
  return (
    <>
      <input value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </>
  );
}

localhost:3000

Examples

Example 01Basic Usage

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  const handleChange = (event) => setName(event.target.value);
  return (
    <>
      <input value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </>
  );
}

Example 02Advanced Example

import { useState } from 'react';

function Subscribe() {
  const [checked, setChecked] = useState(false);
  const handleChange = (event) => setChecked(event.target.checked);
  return <input type="checkbox" checked={checked} onChange={handleChange} />;
}

Best Practices

Read the new value from event.target.value inside an onChange handler and pass it directly to a state setter, for the standard controlled-input pattern
Pair a controlled input's value prop with its onChange handler together — a value prop without an onChange handler makes the input read-only and typically triggers a React warning
Use event.target.checked instead of event.target.value specifically for checkbox and radio inputs, since their relevant changed property is a boolean, not a string

Interview Question

Why does a controlled input's value prop typically need to be paired with an onChange handler, and what happens if you provide value without one?▼

Hint: Think about what determines the input's displayed value when it's controlled, versus what actually causes that value to change over time.

A controlled input's displayed value is dictated entirely by the value prop you pass it, from React state, rather than by the browser's own internal, uncontrolled tracking of what the user typed — this means React, not the browser, is the single source of truth for that input's current value. Without an onChange handler updating that underlying state in response to the user's typing, the value prop would remain permanently fixed at whatever it was initially set to, since nothing in the component would ever cause it to change even as the user tries to type into the field, making the input appear frozen or effectively read-only. React specifically detects and warns about this pattern, an input given a value prop but no onChange handler, precisely because it's very often an unintentional mistake rather than a deliberate choice to build a genuinely read-only field.

Exercises

MediumPractice using onChange in a real scenario.

View Solution

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  const handleChange = (event) => setName(event.target.value);
  return (
    <>
      <input value={name} onChange={handleChange} />
      <p>Hello, {name}</p>
    </>
  );
}

Frequently Asked Questions

Why does a controlled input's value prop typically need to be paired with an onChange handler, and what happens if you provide value without one?▼

Related Functions

onsubmitform-handlingusestate-in-forms