Compare multiple boolean props versus a single status string prop

WHAT THIS TESTS: This question tests whether you can recognize API design patterns that create impossible states and whether you prefer making invalid states unrepresentable over defensive coding inside the component. It surfaces your opinions on type safety, prop surface area, and how much you trust consumers of your component.

A GOOD ANSWER COVERS: A strong answer hits four points in order. First, multiple boolean props such as isLoading and isError allow the consumer to pass conflicting flags at the same time, which creates impossible UI states. Second, when conflicts occur, the component must silently prioritize one flag over another through the order of conditional checks, which leaks implementation details. Third, a single string prop such as status with an enumerated set of values makes impossible states literally unrepresentable, so the compiler or runtime can reject or gracefully handle garbage input. Fourth, a single enum prop is easier to extend later because adding a new state means adding one string value rather than a new boolean prop and new conditional branches across the codebase.

COMMON WRONG ANSWERS: The biggest red flag is claiming that booleans are simpler or more flexible. Another warning sign is saying that consumers should just read the docs and avoid passing conflicting props. Interviewers also frown on answers that ignore type safety or argue that runtime prop-type warnings are enough defense. Suggesting an ESLint rule to ban combinations is creative but misses the point that the API itself should prevent the error.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle a component that truly has orthogonal concerns, such as a disabled state that can apply to any status. They may also ask how you would model this in TypeScript, or how you would migrate a legacy component from multiple booleans to a single enum without breaking existing consumers.

ONE CONCRETE EXAMPLE: Imagine a CommonButton with primary, warning, and danger booleans. If a consumer writes primary warning danger, the rendered color depends on the order of if statements inside the component, exposing internal priority logic. Replacing those three flags with a single variant enum of default, primary, warning, and danger removes the conflict entirely. An invalid variant string can fall back to the default color, and adding a new style later only requires updating the enum map rather than adding another boolean and another conditional.

Source: kyleshevlin.com