Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If a child component should trigger a function owned by its parent, pass that function to the child as a prop. The child calls the callback when the relevant event happens; it does not need to reach upward or call the parent component itself.
Pass the parent function as a callback prop
In React, a function is a JavaScript value, so a parent can pass it to a child just like other props. Give the prop a name that describes the event or request, such as onAction, onSave, or onChange.
function Parent() {
function handleAction() {
console.log('Action requested by child');
}
return <Child onAction={handleAction} />;
}
function Child({ onAction }) {
return <button onClick={onAction}>Run parent action</button>;
}Here, Parent supplies the function, and Child invokes it in response to a click. The child can request that the parent do work without knowing how that work is implemented. React documents function props in its props guide and demonstrates passing event handlers to children in its event-handling guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
Pass data back through the callback
A child can provide an argument when it calls the callback. This is useful when the parent owns data that should change in response to a child interaction.
#1 Best Overall
import { useState } from 'react';
function Parent() {
const [message, setMessage] = useState('Waiting');
function handleChildAction(value) {
setMessage(value);
}
return (
<>
<p>{message}</p>
<Child onAction={handleChildAction} />
</>
);
}
function Child({ onAction }) {
return (
<button onClick={() => onAction('Child clicked')}>
Notify parent
</button>
);
}The parent owns message and its update function. The child reports an event by calling onAction with a value; the parent decides what to do with it. This keeps the direction of communication clear: data and callbacks flow down as props, while a child event invokes the callback to request a change.
Choose the right owner for shared state
If a value needs to coordinate a parent and one or more children or siblings, keep that state in their closest common parent. Pass the current value down to components that need to display it, and pass handlers to components that need to request changes. React calls this approach lifting state up.
Not all state belongs in a top-level component. Keep a piece of state local when other components do not need to coordinate around it. Context may help when information must reach many deeply nested consumers, but it is unnecessary for a straightforward parent-child callback; React describes both props and Context in its props guide.
Use a ref only when the parent needs an imperative child command
The callback pattern covers the usual case: a child event asks the parent to perform work. The reverse direction—having a parent command a capability owned by a child—can call for a ref when the action is inherently imperative, such as focusing an input, scrolling to a node, triggering an animation, or selecting text.
A child can expose a deliberately limited API with useImperativeHandle. React cautions against using refs for behavior that can be expressed through props. For example, a parent-controlled isOpen prop is generally a better way to represent whether a modal is open than exposing imperative open() and close() commands. See React’s useImperativeHandle reference and guide to manipulating the DOM with refs.
Ref syntax depends on the React version
In React 19, a function component can receive ref as a prop. In React 18 and earlier, a custom component uses forwardRef to receive a ref from its parent. The imperative-handle API is available for exposing selected methods; consult the React documentation for useImperativeHandle and forwardRef for the version-specific details.
Quick Recap
Best Value
Avoid common callback mistakes
- Do not call the handler while rendering. Use
onClick={handleClick}to pass a function.onClick={handleClick()}calls it immediately during render. If the callback needs an argument, pass a wrapper such asonClick={() => handleClick(value)}. - Do not add an Effect just to send child data upward. For a user-triggered action, call the callback from the relevant event handler. If both parent and child need the result of a fetch, React recommends having the parent own the fetch and pass the result down. See You Might Not Need an Effect.
- Do not add
useCallbackautomatically. The callback-prop pattern works without it.useCallbackcaches a function definition between renders for cases where stable function identity matters; it is a performance optimization, with dependencies and trade-offs, rather than a requirement. See React’s useCallback reference.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
