Question Bank
React Stateful vs Stateless Components: Two Explanations Quiz
Difficulty: Easy
Two explanations of the stateful/stateless (smart vs presentational) split, plus companions on hooks-era state in function components and on testability trade-offs.
React Stateful vs Stateless Components: Two Explanations Quiz
Two explanations of the stateful/stateless (smart vs presentational) split, plus companions on hooks-era state in function components and on testability trade-offs.
929 views
22
Define a stateful (smart) component and a stateless (presentational) component, and explain why this split is a useful design boundary even in a hooks-only codebase.
Examples
Example 1:
Input: a component that owns a counter value and renders the count plus +/- buttons
Output: stateful (smart): it owns state and behavior.
Explanation: this component holds the counter in useState and decides how the user interactions mutate it.Example 2:
Input: a component that takes `count` and `onIncrement` as props and renders them
Output: stateless (presentational): no state, no behavior of its own, easy to reuse.
Explanation: it is a pure function of its props; render-only.Compare a class component with this.state to a function component with useState. List concrete advantages function components have today (less code, no this binding, easier to test).
Examples
Example 1:
Input: same counter implemented as a class and as a function
Output:
class version has constructor, super(props), this.state, this.setState, render method, and method binding.
function version has one useState call and one onClick arrow.
Explanation: function components compose smaller and have no `this`, so refactoring is mechanical.Show that a function component without useState is effectively stateless. What does "stateless" mean precisely in a hooks-era codebase, and is a component using useRef for a mutable timer id still stateless?
Examples
Example 1:
Input:
function Greeting({ name }) { return <h1>Hello {name}</h1>; }
Output: stateless (no useState, no useReducer, no useRef-tracked behavior).
Explanation: output depends only on props.Example 2:
Input: a component that uses useRef to hold a timer id across renders
Output: pragmatically stateful (the ref is hidden internal state; output of effects depends on it across renders).
Explanation: "stateless" is about whether the component has observable internal state, not whether it has any local variables.List four testability and reuse advantages of keeping presentational components stateless, and one situation where you would intentionally co-locate state into the leaf component anyway.
Examples
Example 1:
Input: a presentational <Badge tone="warning">Stale</Badge>
Output: testable by rendering with a few prop combinations; no state to seed; deterministic snapshots.
Explanation: the only variables are the props you pass; no effects, no side channels.Example 2:
Input: a <Disclosure> that animates open/closed and is used in 50 places
Output: co-locating the open state inside the component is fine, because no caller cares about intermediate animation state.
Explanation: state belongs as low in the tree as the consumers allow.