Understanding React State and Props for Beginners

Introduction

State and props are two core concepts in React. Beginners often confuse them or use them incorrectly.

This guide explains React state and props in a beginner-friendly way, with clear examples and practical use cases.

What Are Props?

Props (short for properties) are used to pass data from a parent component to a child component.

Props are:

• Read-only
• Passed from parent to child
• Used to customize components

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

The Greeting component receives name as a prop.

What Is State?

State represents data that can change over time inside a component.

Unlike props, state is:

• Managed inside the component
• Mutable using state setters
• Triggers re-renders when updated

import { useState } from "react";

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

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

Key Differences Between State and Props

• Props are passed into a component; state lives inside it
• Props are immutable; state can change
• Props configure components; state controls behavior

How State and Props Work Together

Often, a parent component manages state and passes it down as props.

function Parent() {
  const [name, setName] = useState("React");

  return <Greeting name={name} />;
}

This pattern is known as lifting state up.

Common Beginner Mistakes

1. Modifying Props

Props should never be modified inside a component.

2. Storing Derived State

Avoid storing values in state that can be calculated from props.

Final Thoughts

Understanding state and props is essential for building React applications.

Once you grasp their roles, component design becomes much clearer and easier.