Callback Props in React

Callback props let a parent component pass a function to a child so the child can request an action or communicate information back to the parent. The parent keeps ownership of the relevant state and decides how to respond when the callback runs.

In React, props normally flow from parent to child. A callback prop reverses the direction of communication without reversing data ownership: the parent gives the child a function, and the child calls that function when something happens.

For example, a parent might own `count` with `useState` and pass `increment` to a button component. When the child handles a click, it calls `onIncrement()`. The function executes in the parent's context, allowing the parent to update its state and trigger a re-render.

Callback props can also carry data upward. A child can call something like `onSelect(item)` or `onChange(value)`, allowing the parent to receive the child's event data and decide what to do with it. This pattern is commonly used for forms, selections, dialogs, and reusable controls.

The child should generally treat the callback as an interface supplied by its parent rather than directly modifying the parent's state. This keeps components loosely coupled: the child reports an event or request, while the parent determines the resulting state change.

Key points

• Functions can be passed through React props like any other value.
• A child invokes a callback prop to notify or request something from its parent.
• The parent retains ownership of state and supplies the behavior.
• Callbacks can receive arguments, allowing children to send data upward.
• Common names include `onChange`, `onClick`, `onSelect`, and `onSubmit`.

Interview questions

How would you pass data from a child component to its parent?

The parent defines a callback that accepts the data and passes it to the child as a prop. When the relevant event occurs, the child calls the callback with the value it wants to report. The parent receives that value and can update its state or perform another action. For example, a child could call `onSelect(option)` when a user chooses an option.

What are callback props in React?

A callback prop is a function that a parent passes to a child through props. The child can call that function when an event or interaction occurs. This gives the child a way to notify the parent without directly accessing the parent's state. The parent remains responsible for deciding what the callback should do.

What is the difference between `onClick={handleClick}` and `onClick={handleClick()}`?

`onClick={handleClick}` passes the function to React so React can call it when the click occurs. `onClick={handleClick()}` calls the function while React is rendering and passes its return value as the handler. Therefore, the second form is usually incorrect when the goal is to run the function only after the click. If arguments are needed, an arrow function such as `onClick={() => handleClick(id)}` can defer the call.

Why are callback props useful for component design?

They let a reusable child component expose events or requested actions without knowing how the parent will implement them. The child can focus on presenting UI and reporting interactions, while the parent owns application-specific state and behavior. This creates a clear component interface based on props. It also makes the child easier to reuse in different contexts.

How can callback props carry information from a child to a parent?

The parent can provide a function whose parameters describe the information it expects. The child calls that function with the relevant values, such as an ID, form value, or selected object. The parent receives those arguments and can use them to update state or perform other logic. This is still unidirectional data flow because the parent owns the state and the child communicates through the provided interface.