State vs Props in React.js

state and props are two the most crucial concepts to build a dynamic and interactive UI with React.js. They are used for handling data with different purposes.

State: it is a built-in object in React that represents the mutable data specific to a component. It is managed internally by the component itself. The ‘ setState’ method is used when the state needs to be mutated, and every time the state is updated, the component is re-rendered. Since state is specific to a particular component, its scope is confined within that component, and it is handled locally and privately .

import React, { useState } from 'react';

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

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

export default Counter;

Props: they are essentially parameters that are passed with the data from the parent component, and they should not be modified in the child component. Components can pass and receive data through props, making them accessible from both the child and its parents components.

import React from 'react';

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

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

export default App;