State and Props in React: Understanding the Core Concepts

In React, state and props are fundamental concepts that help manage data and make components interactive. While they serve similar purposes, their usage and behavior differ significantly.

What is State?

State is an object that represents the dynamic data of a component. It is local to the component and can change over time, usually in response to user actions or other events.

Key Features of State:

1. Mutable: State can be updated using setState (in class components) or hooks like useState (in functional components).
2. Local Scope: State is specific to the component it is defined in and cannot be directly accessed by other components.
3. Triggers Re-render: When the state is updated, the component re-renders to reflect the changes in the UI.

Example of State (Using Functional Component):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

What are Props?