State and Props

What are State and Props?

In React Native, state and props are two core concepts that allow you to manage data and enable component communication. While they serve similar purposes, they are used in different scenarios.

State

Overview

State is a mutable object that holds data that affects the output of a component. Changing the state triggers a re-render of the component.

Example

Here's an example of using state to manage a counter:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
 
const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
    </View>
  );
};
 
export default Counter;

Props

Overview

Props (short for "properties") are immutable and allow you to pass data from a parent component to a child component. They are similar to function arguments.

Example

Here's an example of passing props to display a greeting:

import React from 'react';
import { View, Text } from 'react-native';
 
const Greeting = ({ name }) => {
  return (
    <View>
      <Text>Hello, {name}!</Text>
    </View>
  );
};
 
export default Greeting;

State vs Props

• State:

  • Managed within the component (local or component state).
  • Mutable. Use setState or hooks like useState to update.
  • Can be passed to child components as props.

• Props:

  • Received from a parent component.
  • Immutable. Cannot be modified by the component that receives them.
  • Useful for component reusability.

Understanding the proper use of state and props is crucial for building scalable and maintainable React Native applications. Feel free to dive deeper into each topic to fully grasp their usage and benefits.