React Information Flow

Information Flow in React

Ever wondered how information flows in a React app? How do we pass data between siblings or from parent to child? What if I want to update state in the parent component due to an event in a child?

Understanding Information Flow

In React, data flows uni-directionally—from parent to child. This means that components pass data down via props. However, if a child component needs to modify the parent's state, it does so using a callback function passed as a prop.

Sibling components cannot communicate directly. Instead, data should be lifted to the nearest common parent, which then passes it down as props. This technique is called lifting state up.

fig1: Illustrates Information flow in React

Key Principles:

• Props: Used to pass data down from parent to child.
• Callbacks: Used to pass data up from child to parent.
• State Lifting: When siblings need to share data, state should be stored in their closest common parent.
• State Management: For larger applications, tools like Redux or React Context can help manage state globally.

Example 1: Passing Data from Parent to Child

function Parent() {
  const [message, setMessage] = React.useState("Hello from Parent!");

  return <Child message={message} />;
}

function Child({ message }) {
  return <p>{message}</p>;
}

Here, the Parent component holds a state variable message, which is passed down to the Child component via props.

Example 2: Passing Data from Child to Parent (Callback Functions)

function Parent() {
  const [color, setColor] = React.useState("blue");

  function changeColor() {
    setColor(color === "blue" ? "red" : "blue");
  }

  return <Child onChangeColor={changeColor} />;
}

function Child({ onChangeColor }) {
  return <button onClick={onChangeColor}>Change Parent Color</button>;
}

Here, the onChangeColor function is passed down from Parent to Child as a prop. When the child button is clicked, the function is invoked, updating the parent’s state.

Example 3: Synchronizing State Between Siblings

Since siblings cannot directly share state, we lift the state up to their common parent.

function Parent() {
  const [childColor, setChildColor] = React.useState("white");

  function handleColorChange() {
    const newColor = childColor === "white" ? "yellow" : "white";
    setChildColor(newColor);
  }

  return (
    <div>
      <Child color={childColor} onChangeColor={handleColorChange} />
      <Child color={childColor} onChangeColor={handleColorChange} />
    </div>
  );
}

function Child({ color, onChangeColor }) {
  return <div onClick={onChangeColor} style={{ backgroundColor: color, padding: '20px', margin: '5px' }}>Click Me</div>;
}

Here, clicking on any Child updates the state in Parent, which in turn updates both Child components.

Conclusion

• Data flows down via props.
• Data flows up via callback functions.
• Sibling components share data through lifting state up.
• For complex state management, consider React Context or Redux.

By following these principles, we can build efficient and scalable React applications with clear and predictable data flow.

Resources:
Lifting State Up.