React Callbacks

Callbacks in React are functions passed from parent to child components to enable communication back to the parent. They allow child components to trigger actions or send data while preserving React’s one-way data flow.

• Enable child components to notify the parent about events.
• Allow data to be sent from child to parent.
• Keep state and logic managed in the parent component.
• Maintain a clean and predictable data flow in React.

Working of Callbacks

A callback is simply a function defined in the parent and passed to the child as a prop. The child executes this function when an event occurs.

1. Passing Callbacks as Props

Parent components can pass callback functions as props to child components, allowing child components to invoke these functions when necessary.

function ParentComponent() {
  function handleChildClick() {
    console.log('Child clicked!');
  }

  return <ChildComponent onClick={handleChildClick} />;
}

In this example, handleChildClick is passed as a prop to the ChildComponent.

2. Invoking Callbacks in Child Components

Child components can invoke callback functions passed to them as props, typically in response to user interactions or internal state changes.

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

Here, the onClick prop is called when the button in the ChildComponent is clicked.

Data Transfer Using Callbacks

Callbacks can also be used to send data from the child to the parent.

function ParentComponent() {
  const handleData = (message) => {
    console.log(message);
  };

  return <ChildComponent sendData={handleData} />;
}

function ChildComponent({ sendData }) {
  return <button onClick={() => sendData("Hello from Child")}>Send Data</button>;
}

• The parent defines handleData and passes it to the child as the sendData prop.
• The child calls sendData when the button is clicked.
• The message sent from the child is received and logged by the parent.

Use Cases for React Callbacks

Callbacks are commonly used in React to enable interaction and communication between child and parent components during user-driven events.

• Handling button clicks and other user actions.
• Sending form input values to parent components.
• Updating parent state from child components.
• Triggering API calls from child components.

Best Practices for Using Callbacks in React

It help ensure efficient communication between components while keeping your application clean, readable, and performant.

• Single Responsibility: Each callback should perform only one specific task.
• Performance Optimization: Use useCallback to prevent unnecessary function re-creation and re-renders.
• Clear Naming: Use descriptive names like handleClick or onSubmit for better readability.
• Minimal Data Passing: Pass only the required values through callbacks to keep components clean.
• Safe State Updates: Always update state using React’s state setter functions inside callbacks.
• Proper Usage: Use callbacks mainly for communication from child to parent components.