state vs props in React

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>
  );
}

Table of Contents

props
state