5 questions foundWhat is the difference between props and state in React?
Beginner Props are values passed into a component from its parent, and a component cannot change its own props directly. State is data that a component manages internally and can change over time, usually in response to user actions, and changing state causes the component to re render.
function Greeting({ name }) { // name is a prop, passed in from the parent
const [visits, setVisits] = useState(0); // visits is state, managed internally
return (
<div>
<p>Hello, {name}</p>
<button onClick={() => setVisits(visits + 1)}>Visited {visits} times</button>
</div>
);
}
Real-world example A user profile card receives the user's name as a prop from its parent page, while it manages whether its own details section is expanded or collapsed using its own internal state.
Common follow-ups: Can a child component change a prop value it received from its parent?;Why does changing state cause a component to re render but changing a regular variable does not?
Components & JSX;Hooks
How do you pass data from a parent component to a child component in React?
Beginner You pass data as props, which look like HTML attributes when writing JSX. The child component receives these values as a single object, usually written using destructuring to pull out each named value directly.
function ParentComponent() {
return <UserCard name="Alice" age={30} />;
}
function UserCard({ name, age }) {
return <p>{name} is {age} years old</p>;
}
Real-world example A parent dashboard page passes a specific user's name and age down to a reusable UserCard component, letting the same card component display different information for every different user.
Common follow-ups: What happens if a child component tries to change the value of a prop it received?;How would you pass a function as a prop so a child can communicate back to its parent?
Component Composition & Children Props;Components & JSX
Why is state considered the single source of truth for data that changes in a React component?
Intermediate Keeping data in state rather than scattered across variables or the actual DOM ensures React always knows the current, correct value, and can reliably re render the screen to match it. If the same piece of data existed in more than one place, they could easily fall out of sync and show incorrect or confusing information.
// Risky, two separate places tracking similar information
let isOpenVariable = false; // a plain variable, React does not track this
const [isOpen, setIsOpen] = useState(false); // the actual source of truth
// Correct, only state controls whether the menu is shown
return isOpen && <Menu />;
Real-world example A dropdown menu component avoids a confusing bug where the menu sometimes appeared closed in the UI but was technically still open in the code, by removing a leftover plain variable and relying only on state as the single source of truth.
Common follow-ups: What problems can happen if the same piece of information is tracked in two different places?;How do you decide whether a piece of data should live in state at all?
State Management;Hooks
How does lifting state up work in React, and when should you use this pattern?
Advanced Lifting state up means moving a piece of state from a child component up to their closest shared parent, so multiple sibling components can read and update the same data. This is needed whenever two components that do not directly relate to each other need to stay in sync with the same information.
function Parent() {
const [selectedColor, setSelectedColor] = useState('blue');
return (
<>
<ColorPicker selectedColor={selectedColor} onSelect={setSelectedColor} />
<Preview color={selectedColor} />
</>
);
}
Real-world example A design tool keeps the currently selected color in the shared parent component, so both the color picker and the live preview panel, which sit as separate sibling components, always stay perfectly in sync with each other.
Common follow-ups: What is the downside of lifting state too high up in a large component tree?;When would Context be a better solution than lifting state up?
Context API;State Management
How would you give a prop a default value in case the parent does not pass one?
Intermediate You can use default parameter syntax directly when destructuring props inside the function's parameter list, giving a fallback value that is used automatically whenever that specific prop is left out by the parent component.
function Button({ label = 'Click Me', color = 'blue' }) {
return <button style={{ backgroundColor: color }}>{label}</button>;
}
<Button /> // shows a blue button labeled Click Me
<Button label="Submit" /> // shows a blue button labeled Submit
Real-world example A shared Button component always shows a sensible default label and color even if a developer forgets to specify them, thanks to default values set directly in the component's props.
Common follow-ups: What happens if a parent explicitly passes undefined for a prop that has a default value?;Is there a difference between setting a default this way versus using defaultProps?
Components & JSX;Component Composition & Children Props