React State & Props Explained for Beginners

React is one of the most popular JavaScript libraries for building modern, interactive user interfaces. If you are new to React, two of the most important concepts you must understand are state and props. These two ideas form the foundation of how React components communicate, manage data, and update the user interface.

In this comprehensive beginner-friendly guide, you will learn what state and props are, how they are different, when to use each one, and how they work together to build dynamic applications. We will go step by step, using simple explanations, real examples, best practices, and common mistakes to avoid. By the end of this article, you will have a strong, practical understanding of React state and props and how to use them in real projects.

What Is React and Why State & Props Matter

React is a JavaScript library developed by Facebook for building user interfaces using reusable components. Instead of manipulating the DOM directly, React lets you describe what your UI should look like, and it updates the page efficiently when data changes.

To do this, React components need a way to:

Receive data from other components
Store and manage their own data
Update the UI when data changes

This is where props and state come in:

Props are used to pass data into a component.
State is used to store and manage data inside a component.

Understanding these two concepts is essential for building any real React application, from simple counters to full-scale web apps.

Understanding React Components

Before diving deeper into state and props, let’s quickly review what a React component is. A component is a reusable piece of UI. It can be as small as a button or as large as an entire page.

Here is a very simple React functional component:


function Welcome() {
  return <h1>Hello, React!</h1>;
}

This component returns some JSX (JavaScript XML), which looks like HTML but is actually JavaScript. When React renders this component, it shows “Hello, React!” on the screen.

Now let’s see how props and state make components more powerful and dynamic.

What Are Props in React?

Props (short for “properties”) are how you pass data from one component to another. They are read-only, meaning a component should never change its own props.

Think of props like arguments to a function. Just as you pass parameters into a function, you pass props into a React component.

Basic Example of Props


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

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

In this example:

The App component passes a prop called name to Greeting.
The Greeting component receives it as props.name.
The UI displays: “Hello, Alice!”

Props allow components to be reusable. You can use the same component with different data:


<Greeting name="Bob" />
<Greeting name="Charlie" />

Each instance shows a different greeting without changing the component’s internal code.

Why Props Are Read-Only

One important rule in React is that props are immutable. This means a component should never modify the props it receives.

Why is this important?

It makes your application more predictable
It prevents unexpected side effects
It keeps data flowing in one direction (from parent to child)

If a component needs to change data, it should use state instead.

What Is State in React?

State is a way for a component to store and manage data that can change over time. When state changes, React automatically re-renders the component to update the UI.

State is typically used for things like:

User input
Toggle switches (on/off)
Form values
Fetched data from an API
UI interactions like counters or tabs

In modern React, state is usually managed using the useState hook.

Basic Example of State


import { useState } from "react";

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

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

In this example:

count is the state variable
setCount is the function to update the state
When you click the button, the state changes
React re-renders the component with the new value

This is how React creates interactive user interfaces.

Key Differences Between State and Props

Although state and props both hold data, they serve different purposes.

Props	State
Passed into a component	Managed inside a component
Read-only	Can be changed using setState or useState
Used for configuration and data flow	Used for dynamic, changing data
Controlled by parent component	Controlled by the component itself

In simple terms:

Use props to pass data down
Use state to manage data that changes

Using Props and State Together

In real applications, state and props are often used together. A common pattern is:

The parent component holds the state
The parent passes data to child components via props
The child components display the data or trigger changes

Example: Parent and Child Components


import { useState } from "react";

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

function App() {
  const [number, setNumber] = useState(0);

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

Here:

App owns the state
Display receives data via props
When the state changes, both components update automatically

Why React Uses One-Way Data Flow

React follows a one-way data flow model. This means data flows from parent components to child components through props.

This design makes applications:

Easier to debug
More predictable
More maintainable

If a child component needs to change data, it usually calls a function passed down from the parent, and the parent updates the state.

Passing Functions as Props

Props are not limited to simple values like strings or numbers. You can also pass functions.

Example: Child Updating Parent State


function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

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

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

This pattern is very common in React and allows child components to communicate with parent components in a clean and controlled way.

Common Beginner Mistakes

Trying to modify props directly
Forgetting to use the state update function
Storing too much data in state unnecessarily
Not lifting state up when multiple components need the same data

Avoiding these mistakes will make your React code cleaner and easier to maintain.

Best Practices for Using State and Props

Keep state as simple and minimal as possible
Pass only the props a component really needs
Use descriptive names for state variables and props
Lift state up when multiple components need the same data
Keep components small and focused

Real-World Example: Simple Todo List

Let’s look at a simple example where state and props work together in a realistic scenario.


import { useState } from "react";

function TodoItem({ text }) {
  return <li>{text}</li>;
}

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  const addTodo = () => {
    setTodos([...todos, input]);
    setInput("");
  };

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <TodoItem key={index} text={todo} />
        ))}
      </ul>
    </div>
  );
}

Here:

State stores the list of todos and the input value
Props pass each todo item to the child component
The UI updates automatically when state changes

Frequently Asked Questions (FAQs)

What is the main difference between state and props?

Props are used to pass data into a component and are read-only. State is used to manage data inside a component and can change over time.

Can a component have both state and props?

Yes. Most real-world components use both. Props provide external data, and state manages internal, changing data.

Should I store everything in state?

No. Only store data in state if it changes over time and affects what the user sees. Static data can be kept as regular variables or props.

Can child components change parent state?

Not directly. But they can receive a function via props and call it to request a state update in the parent.

Is state only for class components?

No. With React hooks like useState, functional components can use state easily.

Final Thoughts

State and props are the heart of React development. Props let you pass data between components, while state lets components manage and react to changing data. Together, they make it possible to build dynamic, interactive, and maintainable user interfaces.

If you truly understand these two concepts, you will find React much easier and more enjoyable to use. The best way to master them is to practice by building small projects like counters, forms, and todo lists, and gradually move to larger applications.

🚀 Next step: Learn about React hooks, component lifecycle, and state management patterns to take your React skills to the next level.

CodeBasedLearning