easyFrontend

What is the difference between state and props?

Q: What is the difference between state and props?

**Core concept (TL;DR).** **Props** are inputs passed *into* a component from its parent — read-only from the child's view. **State** is data a component *owns* internally and can change over time; updating it (via the setter) triggers a re-render. Props flow **down**; state is **local** and mutable through its updater. Props come from above (read-only) · state is internal props <text x="135" y="90"

196 views

Understand the problem

This question assesses a candidate's fundamental understanding of how data flows and changes within React components.

statepropscomponentsdata flow

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Parent state passed down as props

import { useState } from "react";

function Greeting({ name }) {        // 'name' is a read-only prop
  return <p>Hello, {name}!</p>;
}

export default function App() {
  const [name, setName] = useState("Ada"); // state owned by App
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <Greeting name={name} />
      <button onClick={() => setName(name === "Ada" ? "Grace" : "Ada")}>
        Switch name
      </button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you manage component-level state without `useState` or `useReducer`?

What are React Components?