How to communicate between child and parent components?

In React, the data flow is primarily unidirectional, flowing from parent to child. However, there are often scenarios where child components need to communicate back to their parent, or parents might need to extract data from their children. This communication is achieved through a combination of props and callbacks.

1. From Parent to Child – Using Props: The most straightforward method for a parent component to send data to a child component is via props. The parent defines a prop and its value, which the child component can then utilize. This is React’s primary means of passing data and is central to the concept of “props down.”

2. From Child to Parent – Using Callbacks: When a child component needs to communicate back to its parent, it’s typically done using callback functions. Here’s how it works:

   – The parent component defines a function that it wants to be executed when a particular event occurs in the child component.

   – This function is then passed as a prop to the child component.

   – Within the child component, when the specified event occurs (like a button click or a form submission), it invokes the callback function passed in from the parent.

   – Since the function is actually defined in the parent, its execution happens within the context of the parent, allowing the child to effectively “send” data or signals back up.

Another advanced technique, though less commonly used, is **Refs**. Refs allow parent components to directly access methods or properties of child components, but this breaks the typical unidirectional data flow and can make the behavior of the application less predictable. Therefore, it’s recommended to use refs sparingly and only for specific needs where other solutions might be overly cumbersome or inefficient.

While React’s design emphasizes a unidirectional data flow from parent to child through props, it provides mechanisms, like callback functions, to establish a two-way communication channel, ensuring components can interact and collaborate effectively to create a cohesive user experience.