React Props & State

Understanding React Props & State

React is a dynamic JavaScript library for crafting interactive user interfaces. Two key concepts in React that govern component behavior and data flow are props and state. These enable data management, component communication, and UI updates.

Props (Properties) in React

Props are short for properties and facilitate data transfer between components. They are immutable, meaning once assigned, they cannot be altered within the receiving component. Props ensure that components remain pure functions by maintaining a one-way data flow.

Key Characteristics of Props:

• Immutable - The receiving component cannot modify them.
• Unidirectional - Data flows from parent to child.
• Reusable - Enables component customization.
• Read-Only - Cannot be changed within the component itself.

Example:

import React from 'react';

// Child component receiving props
const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// Parent component passing props
const App = () => {
  return ;
};

Explanation:

• TheGreeting component receivesname as a prop.
• The App component provides the name value
• The component can be reused with different name values.

State in React

State represents a component’s internal data and is modifiable within the component. It dictates dynamic behavior, triggering re-renders when updated.

Key Characteristics of State:

• Mutable - Can be changed using setState or the useState hook.
• Component-Specific - State is local to the component.
• Asynchronous - React batches updates for optimization.
• Triggers Re-renders - UI updates based on state changes.

Example:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0); // Declaring state

  return (
    <div>
    <p>Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
export default Counter;

Explanation:

• useState(0) initializes count with a starting value of 0.
• setCount updates the count setCount updates the count.
• React re-renders the component to reflect changes.

Props vs. State: Key Differences

Combining Props & State

Props and state can work together, where a parent component manages the state and passes it as props to child components.

Example:

import React, { useState } from 'react';

// Child Component
const DisplayCount = ({ value }) => {
  return <h2>Current Count: {value}</h2>;
};

// Parent Component
const CounterApp = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
    <DisplayCount value={count} />
      <button onClick={() => setCount(count + 1)}>Increase</button>
      </div>
  );
};

export default CounterApp;

Explanation:

• The CounterApp manages the count state.
• DisplayCount receives count as a prop.
• Clicking the button updates state, triggering re-rendering.

Conclusion

Understanding props and state is crucial for mastering React component behavior. Props provide external data from parent to child, ensuring reusability, while state manages internal data, allowing dynamic interactions. Together, they enable seamless UI updates and efficient data handling.