State is a built-in feature in React that allows components to store and manage data that can change over time. Whenever the state of a component changes, React automatically re-renders the component to reflect the updated data in the UI. State is commonly used for data such as user input, counters, toggles, form values, API responses, and UI visibility.

In modern React, state is managed inside functional components using the useState Hook.

Basic example of state:

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

In this example, count is the state variable, and setCount is the function used to update it. When the button is clicked, the state updates, and the UI re-renders automatically.

State is local to the component in which it is defined. This means only that component can directly modify its state. If other components need the same data, the state must be moved to a common parent component.

Props, on the other hand, are used to pass data from a parent component to a child component. Props are read-only, meaning a component cannot modify the props it receives. This rule ensures predictable data flow and prevents unintended side effects.

Example of props:

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

function App() {
  return <Greeting name="Akbar" />;
}

Here, the App component passes data to the Greeting component using props. The Greeting component can use the data but cannot change it.

State vs Props – Key Differences

State is managed inside a component, while props are passed into a component from its parent. State can change over time using setter functions, but props cannot be modified by the receiving component. State is usually used for interactive or dynamic data, whereas props are used to configure or customize a component.

Another important difference is ownership. A component owns its state, meaning it controls when and how that data changes. Props are owned by the parent component and simply consumed by the child.

Using State and Props Together

In real-world React applications, state and props are often used together. A common pattern is to store data in the parent component’s state and pass it down to child components as props.

Example:

function Display({ value }) {
  return <p>Current value: {value}</p>;
}

function Parent() {
  const [value, setValue] = useState(0);

  return (
    <>
      <Display value={value} />
      <button onClick={() => setValue(value + 1)}>Increase</button>
    </>
  );
}

Here, the Parent component manages the state, while the Display component receives the data via props.

Real-World Scenario

In a form-based application, the parent component usually holds the state for all input fields. Each input component receives the current value and change handler as props. This ensures a single source of truth and keeps the UI consistent across the application.

Important Notes and Best Practices

State should be kept as minimal as possible and placed at the lowest component level that needs it. Avoid duplicating the same state in multiple components. When data needs to be shared across many components, lifting state up is the preferred approach.

Props should be used to make components reusable and configurable. If a component needs to change data, that data should be managed as state in a parent component.

In summary, state is used to manage dynamic, changeable data within a component, while props are used to pass data between components. Understanding the difference between state and props is fundamental to building interactive, maintainable, and scalable React applications.