React.js State vs. Props: Understanding the Difference with Examples

React.js, a popular JavaScript library for building user interfaces, relies heavily on two essential concepts: state and props. In this article, we’ll explore the differences between these two concepts and provide examples to illustrate when to use them effectively in your React applications.

State in React.js

State in React is a built-in object that represents the internal data of a component. It allows a component to manage and store dynamic data that can change over time. Components can initialize and update their state, and when the state changes, React automatically re-renders the component, ensuring that the user interface reflects the most current data.

Here’s an example of a React component with state:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

In this example, the Counter component maintains its count in the state, which can be incremented when the button is clicked.

Props in React.js

Props (short for properties) are a way to pass data from a parent component to its child components. Unlike state, props are immutable and cannot be changed by the child component. Props are used to configure and customize child components, making them dynamic and reusable.

Here’s an example of a parent component passing props to a child component:

import React from 'react';

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

function App() {
  return <Greeting name="John" />;
}

In this example, the App component passes the name prop to the Greeting component, which displays a personalized greeting.

State vs. Props: When to Use Which

Understanding when to use state and when to use props is crucial in React development:

Use State:

• When a value needs to be changed or maintained within a single component.
• When the value should be mutable and controlled by the component itself.
• When you need to re-render the component when the value changes.

Use Props:

• When passing data from a parent component to a child component.
• When you want to configure and customize child components.
• When the data is immutable within the child component.

Combining State and Props

In many cases, you’ll use both state and props within a single React application. Stateful parent components can pass data to stateless child components via props, creating a hierarchy of components that work together to build dynamic and interactive user interfaces.

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Parent!',
    };
  }

  render() {
    return <ChildComponent message={this.state.message} />;
  }
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

In this example, the ParentComponent manages the message in its state and passes it as a prop to the ChildComponent.

Conclusion

In React.js, understanding the difference between state and props is fundamental to building flexible and maintainable applications. State allows components to manage dynamic data and trigger re-renders, while props facilitate the passing of data between components, enabling the creation of reusable and customizable UI elements. By using state and props effectively, you can build interactive and responsive web applications with React.