Callback Props
Last updated: 2026-11-02
Callback Props Callback Props
Props can carry functions as well as data. A child calls the callback the parent passed in at the right moment and reports its own change, which lets a child update the parent's state — the standard way to communicate upward while the data flow stays one-way. The child stays in charge of presentation, and the parent stays in charge of the data.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
// Parent: pass the update function down as a prop
<Counter value={count} onChange={setCount} />
// Child: call the callback at the right moment to "report" the change
<button onClick={() => onChange(value + 1)}>+1</button>⚙️ Parameters
| onXxx (callback) | A function prop supplied by the parent; the child may call it with arguments to hand the interaction result back for the parent to handle. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A centered total and a counting button are shown; every click raises the number inside the button and updates the total above it — the child modified the parent's state through the callback.💡 Key Points
💡 Tip Naming convention: callback props use an on prefix (onChange) while the handler defined in the parent uses a handle prefix (handleChange).
ℹ️ Info When several components need the same state, lift it to their common parent and combine it with callback props to close the loop.
⚠️ Warning A callback is a new function on every render, so when you optimize with memo remember to stabilize the reference with useCallback.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How can a child modify the parent's state?
A The parent passes its setState function (or a handler wrapping it) down as a prop, and the child calls it to trigger a state update in the parent.
Q What is the difference between onXxx and handleXxx?
A onXxx names a callback prop handed to a child and says what happened; handleXxx names the real handler inside the parent and says how it is handled.
Q Do callback props affect performance?
A The call itself is negligible, but a function created on every render invalidates the child's memo; use useCallback to stabilize the reference when you optimize deeply.
