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

1function Greeting(props) {
2  return <h1>Hello, {props.name}!</h1>;
3}
4
5// Parent component using props
6function App() {
7  return <Greeting name="Alice" />;
8}

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

1import React, { useState } from 'react';
2
3function Counter() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}