What are render props?

Render props is a code-sharing technique in ReactJS. This approach allows for dynamic rendering behaviour by passing the logic and JSX rendering responsibility from the parent component to the child component.

The term 'render prop' refers to a prop whose value is a function. The function's value must return JSX/elements that are used to render the components.

Advantages of render props:

1
Code sharing
2
Modularity
3
Reusability
4
Decoupling code
5
Code Encapsulation

Use cases of render props:

1
For Dynamic rendering behaviour, allowing customization of rendering logic.
2
For Sharing behaviour or rendering patterns between components.
3
Encapsulating behaviour that depends on props and state.

Pros of render props:

1
Offers great flexibility in customising rendering behaviour.
2
Encourages component reusability by making components more generic.
3
Supports sharing behaviour and state between components.
4
Effective for providing complex UI components that require customization.

Cons of render props:

1
It can become verbose when complex logic is passed as render props.
2
This can lead to a deeper component hierarchy due to multiple layers of render prop components.
3
Might require passing down multiple render props for different functionalities.

Difficulty: 5/10

Topics: component composition, state sharing, API design

Scenario Questions

0-2 years experience

1
We have a <Hoverable> component that needs to expose its hover state to children. How would you implement this using a render prop?
2
If you forget to pass a render prop function to a component that expects one, what will happen at runtime?

2-5 years experience

1
You need to build a <DataFetcher> component that fetches JSON and lets the caller decide how to render the data. Walk me through how you'd use a render prop for this and why you’d choose it over a higher‑order component.
2
During a refactor, a component that used a render prop stopped updating when its parent state changed. How would you investigate and fix the issue?

5-8 years experience

1
Our UI library has many theming components built with render props, and we’re seeing occasional performance hiccups. How would you profile the impact and decide whether to replace them with hooks or memoization?
2
Design a reusable <Modal> component that uses a render prop to render its content, supports async close handling, and renders via a portal. What edge cases would you guard against?

8+ years experience

1
The team wants to migrate a large codebase from render‑prop APIs to hook‑based APIs while keeping backward compatibility. How would you plan and execute that migration?
2
When choosing between render props, higher‑order components, and custom hooks for cross‑cutting concerns, what architectural criteria do you use at a system‑wide level?

Follow-up Questions

❓What are the main drawbacks of using render props compared to hooks?
❓How does the render prop affect the component's render cycle?
❓Can you give an example where a render prop would be a better choice than a higher‑order component?