state vs props in React

props

• Props are read-only inputs passed to a component from its parent
• They are immutable (cannot be directly modified by the component receiving them)
• Passed down from parent to child components
• Used to configure a component when it's created
• Help make components reusable and configurable

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

// Parent component using props
function App() {
  return <Greeting name="Alice" />;
}

state

• Internal data that can be changed within a component
• Managed entirely inside the component
• Can be modified using the setState() method (in class components) or useState() hook (in functional components)
• Triggers re-rendering when it changes
• Used for data that can change over time within a component

import React, { useState } from 'react';

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

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