Component Patterns Quiz

Question 1

How do you build a specialised version of a general component in React?

Accepted Answer

Wrap it and fill in some props

Answer

Extend it with class inheritance

Answer

Copy and paste the implementation

Answer

Use a mixin

Question 2

How do compound components share state with their children?

Accepted Answer

Through context provided by the parent component

Answer

Through global variables

Answer

By passing props explicitly at every level

Answer

Through refs

Question 3

What is the main limitation of cloneElement for injecting props?

Accepted Answer

It only reaches direct children, so wrapping a child in a div breaks it

Answer

It is slower than context

Answer

It cannot pass functions

Answer

It requires class components

Question 4

What is a higher order component?

Accepted Answer

A function that takes a component and returns a new enhanced component

Answer

A component with many children

Answer

A component rendered at the top of the tree

Answer

A component that uses context

Question 5

Why did custom hooks largely replace HOCs and render props?

Accepted Answer

Hooks share logic without adding wrapper components, injected props or naming collisions

Answer

Hooks render faster

Answer

HOCs were removed from React

Answer

Render props do not work with function components

Question 6

How does a component support both controlled and uncontrolled use?

Accepted Answer

By using the prop when it is not undefined and falling back to internal state otherwise

Answer

By always using internal state

Answer

By requiring the caller to pass a mode prop

Answer

By using a ref

Question 7

What is the benefit of slot props over a long list of boolean options?

Accepted Answer

Callers supply whatever content they need instead of the component anticipating every variation

Answer

Fewer renders

Answer

Slots are type safe by default

Answer

Booleans are deprecated in JSX