In React, props and state are fundamental concepts that help manage and control data within components. They both play crucial roles in how components function and interact with each other. Here’s a detailed look at each:

Props

Props (short for properties) are a way of passing data from a parent component to a child component. They are read-only and are used to configure or customize a component.

Key Characteristics of Props

1. Read-Only:

   • Props are immutable; they cannot be modified by the child component that receives them. They are meant to be read-only and are used to pass data down the component tree.
   • Example:

     function Greeting(props) {
       return <h1>Hello, {props.name}!</h1>;
     }
     
     // Usage
     <Greeting name="Sara" />
     

2. Passed from Parent to Child:

   • Props are passed from parent components to child components as attributes in JSX. The child component receives these attributes as a props object.
   • Example:

     function ParentComponent() {
       return <ChildComponent message="Hello from parent" />;
     }
     
     function ChildComponent(props) {
       return <p>{props.message}</p>;
     }
     

3. Dynamic Data:

   • Props can be used to pass dynamic data and functions from parent components to child components, allowing for flexible and reusable components.
   • Example:

     function Button(props) {
       return <button onClick={props.onClick}>{props.label}</button>;
     }
     
     function App() {
       const handleClick = () => alert('Button clicked!');
     
       return <Button label="Click Me" onClick={handleClick} />;
     }
     

State

State is a mutable data structure that belongs to a component. It is used to store data that can change over time and affects how the component renders.

Key Characteristics of State

1. Mutable:

   • State is mutable; it can be changed by the component itself. When state changes, React re-renders the component to reflect the updated state.
   • Example in Function Component:

     import React, { useState } from 'react';
     
     function Counter() {
       const [count, setCount] = useState(0);
     
       return (
         <div>
           <p>Count: {count}</p>
           <button onClick={() => setCount(count + 1)}>Increment</button>
         </div>
       );
     }
     

2. Managed Locally:

   • State is managed within the component that owns it. It is not directly passed between components; instead, it is often used to determine what should be rendered.
   • Example in Class Component:

     class Counter extends React.Component {
       constructor(props) {
         super(props);
         this.state = { count: 0 };
       }
     
       increment = () => {
         this.setState({ count: this.state.count + 1 });
       };
     
       render() {
         return (
           <div>
             <p>Count: {this.state.count}</p>
             <button onClick={this.increment}>Increment</button>
           </div>
         );
       }
     }
     

3. Used for Dynamic Data:

   • State is used to manage and track data that affects how the component renders and behaves. This can include form inputs, user interactions, and any other data that changes over time.
   • Example:

     function Form() {
       const [inputValue, setInputValue] = useState('');
     
       const handleChange = (event) => {
         setInputValue(event.target.value);
       };
     
       return (
         <div>
           <input type="text" value={inputValue} onChange={handleChange} />
           <p>You typed: {inputValue}</p>
         </div>
       );
     }
     

Comparison of Props and State

1. Mutability:

   • Props: Immutable, passed from parent to child.
   • State: Mutable, managed within the component.

2. Usage:

   • Props: Used to pass data and event handlers down to child components.
   • State: Used to manage data that changes over time within the component.

3. Update Mechanism:

   • Props: Updated by the parent component; changes to props trigger re-renders in child components.
   • State: Updated by the component itself using state management methods (e.g., setState in class components or useState hook in function components).

4. Scope:

   • Props: Provide a way to pass data down the component hierarchy.
   • State: Internal to the component; used to handle local data and interactions.

Summary

• Props are used to pass data and functions from parent to child components. They are read-only and help make components reusable and customizable.
• State is used to manage data within a component that can change over time, affecting its rendering. State is mutable and is updated using methods specific to the component type (e.g., setState or useState).

Understanding how to use props and state effectively is crucial for building dynamic and interactive React applications.