4. Adv config with render props

Question 1

What is the main problem with the ‘elements as props’ pattern when a parent component needs to pass its own state to the element prop?

Answer 1

There is no direct, explicit way to share the parent’s state with the element being passed in as a prop.

Question 2

Using React.cloneElement to pass props to an element prop can be problematic if the element passed doesn’t have the expected prop names, such as size or color. What pattern solves this issue?

Answer 2

The render props pattern.

Question 3

What is the definition of a render prop in React?

Answer 3

A render prop is a prop whose value is a function that returns a React element.

Question 4

Unlike a regular Component which is called by React, a render function passed as a prop is called directly by _____.

Answer 4

your component

Question 5

How does a component using a render prop pass down default values or state to the element being rendered?

Answer 5

It passes the values as arguments when it calls the render prop function.

Question 6

In the consumer component, how do you receive and apply props (e.g., defaultIconProps) passed from a component using a render prop?

Answer 6

By defining a function that accepts the props as a parameter and spreads them onto the returned element, like renderIcon={(props) => <HomeIcon {...props} />}.

Question 7

How does the render prop pattern make it easy for a consumer to adapt props to fit a different component API (e.g., mapping size to fontSize)?

Answer 7

The consumer has full control within the render function to map the received props to any props their component accepts.

Question 8

What is the key advantage of using a render prop for passing data over using React.cloneElement?

Answer 8

The flow of data is explicit and traceable, with no ‘hidden magic’ overriding props.

Question 9

How can a component like Button use a render prop to share its internal isHovered state with the icon it renders?

Answer 9

It can pass the isHovered state as an argument to the render prop function, e.g., renderIcon(props, { isHovered }).

Question 10

The children prop can also be a function, which is a pattern known as ‘children as a _____’.

Answer 10

render prop

Question 11

What is the syntax for using the ‘children as a render prop’ pattern with nested JSX?

Answer 11

<Parent>{(data) => <Child data={data} />}</Parent>

Question 12

Before hooks, for what primary purpose was the ‘children as a render prop’ pattern often used?

Answer 12

To share stateful logic between components without lifting state up.

Question 13

In the ResizeDetector example, what does the component pass to its children function?

Answer 13

It passes the current window width state, allowing child components to react to it.

Question 14

Using ResizeDetector with a render prop avoids what necessity in the consuming Layout component?

Answer 14

It avoids the need for the Layout component to maintain its own state for the window width.

Question 15

What modern React feature has largely replaced the render prop pattern for sharing stateful logic?

Answer 15

Hooks.

Question 16

How would the ResizeDetector component’s logic be rewritten using a modern approach?

Answer 16

By extracting the state and effect logic into a custom hook, like useResizeDetector.

Question 17

What is one key reason to learn the render props pattern today, even though hooks are more common for sharing logic?

Answer 17

You will likely encounter it in older codebases or in popular libraries that still use it.

Question 18

Render props for _____ and flexibility are still considered very viable, modern use cases.

Answer 18

configuration

Question 19

In which specific scenario can render props still be the preferred pattern for sharing stateful logic over hooks?

Answer 19

When the logic and state you want to share depend on a specific DOM element rendered by the component.

Question 20

Why is a component like ScrollDetector a good candidate for the render prop pattern?

Answer 20

Because the onScroll listener needs to be attached to a specific div rendered by the component, making it difficult to abstract into a generic hook without passing refs.

Question 21

In the ScrollDetector example, the component renders a div and passes the scroll state to its children function. What is the source of this scroll state?

Answer 21

The onScroll event of the div element it renders.

Question 22

According to the source, what was a very popular use case for the render prop pattern before hooks were introduced?

Answer 22

Encapsulating form validation logic.

Question 23

A render prop function is almost the same as a _____, except you call it directly instead of letting React do it.

Answer 23

Component

Question 24

If a component with an ‘element as prop’ needs to control the props of that element, you should convert that element prop into a _____.

Answer 24

render prop