Difference Between State and Props in React

In this article, we will learn about the differences between state and prop. props stands for properties and provides the way to pass the data from one component to another while state is like a variable to store data. Props are immutable because it can't be changed while State is mutable because we can change them easily.

Understanding the concept of state and prop for building reusable and maintainable applications is necessary.

ReactJS Props

Props are the objects used to pass the data from one component to another. It is the abbreviation for Properties. Prop is the read-only component. It is similar to the function arguments. Props are immutable so we can't change the props from inside the component. It helps to share data between the components.

Example

In this example, the name prop is passed to the BestResource component.

// App.jsx

import BestResource from "./BestResource";

export default function App() {
  return (
    <div classname="App"/>
      <BestResource name="Tutorials Point" />
    </div/>
  );
}

In the BestResource component, the name prop is displayed.

// BestResource.jsx

export default function BestResource(props) {
  return (
    <div>
      <h1>Best Resource to Study: {props.name}</h1>
    </div>
  );
}

Output

ReactJS State

React state is a built-in object that allows components to store and update data that can be changed with time. When the state changes, the component automatically re-renders to reflect the changes. Unlike props, the state is mutable, it can be changed within the component.

Example

Here is an example of a counter that dynamically increases using useState hooks.

import React, { useState } from "react";

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

  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Output

Key Differences Between Props and State

Conclusion

In conclusion, understanding the differences between state and props is essential for building efficient and scalable React applications. Prop provides a way to share data between the components, while state provides components with the ability to manage and update their own data dynamically.