React Native State and Props

state-props

1. Props (Properties)
Props are short for properties. They are used to pass data from a parent component to a child component. Props are immutable, meaning that they cannot be modified by the component receiving them. Instead, they are read-only and used to render data or configure the component.

Key Characteristics of Props:
Passed from parent to child: Props allow data and functions to be passed from a parent component to a child component.
Immutable: Once passed to a component, the component cannot modify the props.
Read-only: A child component cannot change the props it receives, it can only use them.
Functional or class components: Both functional and class components can receive and use props.
Dynamic UI: Props help make the component dynamic by allowing it to change its output based on the data passed.
Example of Props in React Native:
jsx
Copy code
// Parent Component
const ParentComponent = () => {
  return <Greeting name="John" />;
};

// Child Component receiving props
const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};
In this example, the Greeting component is receiving a prop called name from the parent component and displaying it in the text. The value "John" is passed as the name prop.

2. State
State is a local, mutable data structure that belongs to a component. It allows a component to keep track of dynamic data and re-render itself whenever the state changes. Unlike props, which are passed to a component, state is managed within the component itself.

Key Characteristics of State:
Local to a component: State is owned and managed within the component that declares it.
Mutable: State can be changed over time, typically based on user interactions or events (like button clicks or API responses).
Triggers re-renders: When the state changes, React Native automatically re-renders the component to reflect the new state.
Managed with useState() in functional components: In modern React Native development, the useState() Hook is used to manage state in functional components.
Class components use this.setState(): In class components, state is managed using this.state and updated with this.setState().
Example of State in React Native:
jsx
Copy code
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  // Declare a piece of state using the useState Hook
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};
In this example, the Counter component uses the useState() Hook to declare a count variable and an associated setter function (setCount). Each time the button is pressed, the count is updated, and the component re-renders to display the new count.

Differences Between Props and State:
Props	State
Passed from parent to child components.	Owned and managed within the component.
Immutable: cannot be changed by the receiving component.	Mutable: can be updated using useState() or setState().
Used for rendering dynamic data based on what is passed.	Used for managing dynamic data that changes within the component.
No direct influence on the component’s internal logic.	Directly affects the component’s rendering and behavior.
Can be used in both functional and class components.	Can be used in both functional (via useState) and class components (via this.state).
No need for an update method since they don’t change.	Requires an update method like setState() or useState() to change the state.
Example: Using Both State and Props Together
Props and state often work together in React Native applications. For example, a parent component might pass data (props) to a child component, while the child component manages its own state.

jsx
Copy code
// Parent Component passing props
const ParentComponent = () => {
  return <Counter initialCount={10} />;
};

// Child Component with both state and props
const Counter = (props) => {
  const [count, setCount] = useState(props.initialCount);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
    </View>
  );
};
In this example:

The ParentComponent passes an initialCount prop to the Counter component.
The Counter component initializes its internal state (count) based on the initialCount prop.
The count state can be updated within the Counter component, and it will be reflected in the UI.