Props & State

In React, props and state are two core concepts used to manage and pass data in applications.

Props are used to pass data from parent components to child components, while state is used to manage data within a component.

What are Props?

Props (short for properties) are read-only inputs passed to a component from its parent.

They allow components to be dynamic and reusable by receiving different data each time they are used.

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Usage:
// <Greeting name="Amit" />

Why Props are Important

Props help create reusable components by allowing the same component to display different data.

They enforce a unidirectional data flow, making applications easier to understand and debug.

What is State?

State is a built-in object in React that holds data that can change over time within a component.

When state changes, React automatically re-renders the component to reflect the updated data.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Difference Between Props and State

Props are passed from parent to child and are immutable, while state is managed within the component and can change.

Props are used for communication between components, whereas state is used for managing internal data.

When to Use Props

Use props when you want to pass static or dynamic data from a parent component to a child component.

Props are ideal for configuring reusable components like buttons, cards, or headers.

When to Use State

Use state when you need to manage data that changes based on user interaction or application behavior.

Examples include form inputs, counters, toggles, and dynamic UI updates.

Updating State Correctly

State should never be modified directly. Instead, always use the state setter function provided by useState.

Direct mutation of state can lead to unpredictable UI behavior.

// Correct
setCount(count + 1);

// Incorrect
count = count + 1;

Lifting State Up

When multiple components need to share the same state, it is lifted to their closest common parent.

This helps maintain a single source of truth in the application.

Props vs State Summary

Props are external inputs, while state is internal data managed by the component.

Both work together to build dynamic and interactive React applications.

Best Practices

Keep state minimal and avoid unnecessary complexity.

Prefer props for passing data and only use state when necessary.

Summary

Props and state are essential concepts in React that control how data flows in applications.

Understanding them is crucial for building efficient and scalable React applications.