React Fundamentals - Props vs State

What Are Props?

Props, short for properties, are used to pass data from a parent component to a child component. They are read-only, meaning the child component cannot modify them directly.

Key Characteristics

• Immutable: Cannot be changed by the child component.
• Used to configure or customize child components.
• Passed from parent to child as function arguments.

Example: Using Props

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};
 
const App = () => {
  return <Greeting name="Rakib" />;
};
 
export default App;

In this example:

• The name prop is passed from the App component to the Greeting component.
• The Greeting component renders a personalized message using the name prop.

What Is State?

State is a way to manage data that changes over time within a component. Unlike props, state is mutable, meaning it can be updated dynamically.

Key Characteristics

• Managed within the component where it's defined.
• Used to make components interactive.
• Changing state triggers a re-render of the component.

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

In this example:

• The count state is initialized to 0 and updated with setCount.
• Each button click increments the count, causing the component to re-render.

When to Use Props vs State

Use Props When:

• You need to pass static or parent-managed data to a child component.
• A component is stateless and only used to display information.
• Data doesn’t need to change over time.

Use State When:

• You need to manage dynamic data within a component.
• A component requires interactivity, such as handling user input or toggling UI elements.
• Data changes over time and needs to trigger UI updates.

Props and State Working Together

Props and state often work hand-in-hand. For example, you can pass a state variable as a prop to a child component to maintain synchronization between components.

Example

const Parent = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increment in Parent</button>
    </div>
  );
};
 
const Child = ({ count }) => {
  return <p>Count from parent: {count}</p>;
};
 
export default Parent;

In this example:

• The parent component manages the count state.
• The count is passed to the child component as a prop, enabling synchronization.

Conclusion

In React, props and state are fundamental tools for creating interactive and dynamic user interfaces. Use props to pass data between components and state to manage data that changes within a component. By understanding their differences and how to use them effectively, you can build powerful and reusable components that bring your UIs to life.

Still have questions about props or state? Let me know in the comments below!