Data Flow and Lifting State Up

React Native uses a unidirectional data flow model, which means that data always moves in one direction: from parent components down to their child components. This flow helps keep your app's data predictable and easier to debug. Sometimes, you will find that two or more components need to share and update the same piece of state. In these cases, you use a technique called lifting state up.

Lifting state up means moving state to the closest common parent of the components that need to share it. Instead of each child component managing its own state, the parent holds the state and passes it down to its children as props. When a child needs to update the state, it calls a function provided by the parent, allowing the parent to update the shared state and pass the new value back down to all children. This keeps your data consistent across related components.

Consider a scenario where you have two child components that both need to access and update the same counter value. Instead of each child maintaining its own counter, you place the counter state in the parent component and pass it down to the children as props. The parent also provides a function to update the counter, which the children can call when needed.

Here is how this looks in code:

import React, { useState } from "react";
import { View, Text, Button } from "react-native";

function CounterDisplay({ count }) {
  return <Text>Counter: {count}</Text>;
}

function CounterControls({ onIncrement }) {
  return <Button title="Increment" onPress={onIncrement} />;
}

export default function CounterParent() {
  const [count, setCount] = useState(0);

  function handleIncrement() {
    setCount(count + 1);
  }

  return (
    <View>
      <CounterDisplay count={count} />
      <CounterControls onIncrement={handleIncrement} />
    </View>
  );
}

In this example, the CounterParent component manages the count state. It passes the current count to the CounterDisplay child and provides the handleIncrement function to the CounterControls child. When the button is pressed in CounterControls, it calls handleIncrement, updating the state in the parent. The new count is then passed down, and both children reflect the updated value. This pattern ensures that both children always display and interact with the same, up-to-date data.