Props and State

In React Native (and React in general), props and state are two fundamental concepts for managing data and rendering components. They help you build dynamic and interactive UIs. Here's an explanation of both, along with examples.

Props

Props (short for "properties") are used to pass data from a parent component to a child component. Props are read-only, meaning a child component cannot modify the props it receives. They make components reusable by allowing them to receive different data each time they are used.

Example of Props

Let's create two components: Greeting and App. The App component will pass a name prop to the Greeting component.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Greeting = (props) => {
  return (
    <View>
      <Text style={styles.text}>Hello, {props.name}!</Text>
    </View>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default App;

            

State

State is a built-in object used to store data that may change over the lifetime of the component. Unlike props, the state is managed within the component and can be modified using the setState method in class components or the useState hook in functional components. When the state changes, the component re-renders to reflect those changes

Example of State in a Functional Component

Here's the same counter example using the useState hook in a functional component:

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Count: {this.state.count}</Text>
        <Button title="Increment" onPress={this.increment} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default Counter;

            

Key Differences Between Props and State

Mutability:

Props: Immutable (read-only) data passed from parent to child.

State: Mutable data managed within the component.

Usage:

Props: Used to pass data and event handlers down to child components.

State: Used to manage data that can change over time and affect the component's rendering.

Responsibility:

Props: Parent component is responsible for providing props to child components.

State: The component itself is responsible for managing its state.