Callback props
📚 What are Callback Props? A callback prop is a function that a parent passes down to a child. When something happens inside the child (like a button click), it calls that function to communicate back UP to the parent. This is the standard pattern for child-to-parent communication in React.
Appy Says…
How does a child component tell its parent that something happened? It can't call the parent directly. Instead, the parent passes a function as a prop, and the child calls that function when needed. This is the callback props pattern.
What are Callback Props?
Callback props are functions passed from parent to child as props. The child calls them to communicate events upward — button clicks, form submissions, selection changes.
- •Parent:
<Button onPress={() => setCount(c => c+1)} /> - •Child:
function Button({ onPress }) { return <button onClick={onPress}>...</button>; } - •Convention: name starts with
on—onPress,onChange,onClose,onSelect - •Callbacks can receive data:
onSelect(item)passes the selected item up - •Parent decides what happens; child just reports the event
- •This is how React's built-in events work:
onClick,onChangeare React's callback props
Think of it like a Roblox button bound to a script
A GUI button in Roblox doesn't do anything itself — it fires an event. You bind a script to that event that decides what happens. Callback props work identically: the Button component fires onPress; the parent script decides the action.
How It Works
- •1. Parent defines a handler function:
const handleSelect = (item) => setSelected(item); - •2. Parent passes it:
<List onSelect={handleSelect} /> - •3. Child receives it:
function List({ onSelect }) { ... } - •4. Child calls it on user action:
onClick={() => onSelect(item)} - •5. Parent's handler runs, updates state, triggers re-render
- •6. Optional: check if callback exists before calling:
onPress?.()
Real-World Examples
- •Modal close:
<Modal onClose={() => setOpen(false)}> - •Item selection:
<ProductCard onAddToCart={handleAddToCart} /> - •Form submit:
<LoginForm onSubmit={handleLogin} /> - •Applaa lesson completion: LessonCard calls
onComplete(lessonId)→ parent updates progress
Key Facts
- •All of React's built-in event props (onClick, onChange, onSubmit) are callback props
- •The convention of prefixing with 'on' is universal in the React ecosystem
- •Callback props are how you 'lift events up' to match the data flow pattern
- •Passing inline arrow functions as callbacks creates a new function on every render — use useCallback for performance-sensitive cases
Watch Out!
Avoid deeply nesting callbacks — passing onXxx through 4+ component levels is 'callback drilling'. If an event needs to reach a distant ancestor, use Context or a state library rather than threading callbacks through every intermediate component.
Remember
Parent passes function as prop (onPress); child calls it on user action. This is how events bubble up through a React component tree. Convention: name starts with 'on'.
What You Learned
- •Callback props = functions passed as props; child calls them to communicate events to parent
- •Name with 'on' prefix; pass data by calling
onSelect(item) - •Unlocks: child-to-parent communication, modals, lists, forms, any event coordination
Key Facts
- →All of React's built-in event props (onClick, onChange, onSubmit) are callback props
- →The convention of prefixing with 'on' is universal in the React ecosystem
- →Callback props are how you 'lift events up' to match the data flow pattern
- →Passing inline arrow functions as callbacks creates a new function on every render — use useCallback for performance-sensitive cases
Real-World Examples
Remember
Parent passes function as prop (onPress); child calls it on user action. This is how events bubble up through a React component tree. Convention: name starts with 'on'.
Quick Quiz
Callback prop is?