Why Callback props in React Native? - Purpose & Use Cases

The Big Idea

What if your app's parts could talk to each other instantly without confusion?

The Scenario

Imagine you have a button inside a child component, and you want to tell the parent component when the button is pressed. Without a clear way to communicate, you might try to check the button state manually or use complicated workarounds.

The Problem

Manually syncing actions between components is slow and confusing. You might end up duplicating code or making bugs because the child and parent don't know how to talk to each other directly.

The Solution

Callback props let the parent send a function to the child. When the child's button is pressed, it calls that function. This way, the parent instantly knows and can react. It's like giving the child a phone to call the parent directly.

Before vs After

✗ Before

Child component changes state but parent stays unaware.
// No direct way to notify parent

✓ After

Parent passes onPress callback to Child.
Child calls onPress() when button pressed.

What It Enables

It enables smooth, clear communication from child to parent components, making your app interactive and easy to manage.

Real Life Example

Think of a shopping app where a product card (child) tells the main screen (parent) when a user taps "Add to Cart". Callback props make this message simple and reliable.

Key Takeaways

Callback props let child components notify parents by calling functions passed down.

This avoids messy manual syncing and keeps code clean.

It makes your app components work together smoothly like a team.