Understanding State vs Props in React

State and props are two of the most crucial ideas to understand when you first start working with React. The foundation of how React components manage data and create dynamic content is made up of these two characteristics. Although state and props might appear to be similar at first, they have different functions.

In this blog, we’ll break down what state and props are, and when to use each one in your React components.

What is State?

State is a JavaScript object that controls how a component behaves and renders, as well as holding dynamic data. In simplest terms, state is used to store data that can change over time and has a direct impact on what appears on the screen.

Characteristics of State:

1. Mutable: State can be changed (mutated) within a component.
2. Managed Locally: State is local to a specific component and is managed by that component.
   
3. Triggers Re-render: When the state changes, React automatically re-renders the component to reflect the updated data.

Let's see an example managing state with useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Initial state is set to 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

In this example, count is the state variable that holds the current count. setCount is a function that updates the state. Every time the button is clicked, the state is updated using setCount, and React re-renders the component to display the new count.

What are Props?

Props, short for "properties", are read-only attributes transferred between parent and child components. They permit components to obtain information from their parents and produce content appropriately. Props cannot be changed by the child component that receives them, in contrast to state.

Characteristics of Props:

1. Immutable: Props are read-only and cannot be modified by the receiving component.
2. Passed from Parent to Child: Props are used to pass data down the component hierarchy.
   
3. No Re-rendering Control: Unlike state, changing props in a parent component does not directly control the child component’s re-rendering logic.
   

Here’s a basic example of how props are passed from a parent component to a child component:

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

function App() {
  return <WelcomeMessage name="Alice" />;
}

export default App;

In this example,the WelcomeMessage component receives a name prop from the App component. The name prop is passed as an argument to WelcomeMessage, which then renders "Hello, Alice!". The child component (WelcomeMessage) cannot modify the name prop, it simply uses it to render content.

Key Differences Between State and Props

When to Use State

1. When you need to manage data that changes over time, like form inputs, counters, or data fetched from an API.
2. When the data is local to a specific component and does not need to be shared across multiple components.

When to Use Props

1. When you need to pass data from a parent component to a child component.
2. When the data is static or comes from an external source and doesn’t need to change within the child component.

Conclusion

It's crucial to comprehend the distinctions between state and props when developing React applications. Props enable data passing between components, whereas state is used to manage dynamic data that changes over time. Gaining proficiency in both will enable you to develop interactive, reusable components that serve as the basis for more intricate React apps.