Describe render method.

The render() method is the only required method in a class component. It is called after static getDerivedStateFromProps and before componentDidMount. It is used to render the UI of the component.

When called, it examine this.props and this.state and return one of the following types:

1
React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
2
Arrays and fragments. Let you return multiple elements from render. See the documentation on fragments for more details.
3
Portals. Let you render children into a different DOM subtree. See the documentation on portals for more details.
4
String and numbers. These are rendered as text nodes in the DOM.
5
Booleans or null or undefined. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean).

1
render() will not be invoked if shouldComponentUpdate() returns false
2
The render() function should be pure, meaning that it does not modify the component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.
3
If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.

Difficulty: 5/10

Topics: class components, render lifecycle, performance

Scenario Questions

0-2 years experience

1
If you create a class component with a render method that returns <div>Hello</div>, what will the user see when the component mounts?
2
What happens if the render method returns undefined or null?
3
How would you conditionally render a loading spinner inside the render method based on a prop called isLoading?

2-5 years experience

1
You added a console.log inside render and noticed it runs multiple times after a state update. Why does that happen and how would you minimize unnecessary renders?
2
A teammate changed a component's render to map over an array but forgot to provide a key. The UI shows a warning and behaves oddly. Explain the issue and how to fix it.
3
During a feature rollout, the component's render throws an error when a required prop is missing. How would you guard against that without using try/catch?

5-8 years experience

1
Our dashboard renders thousands of rows using a class component's render. Performance is lagging. What strategies would you employ at the render level to improve performance?
2
We need to support server‑side rendering for a component that uses lifecycle methods. How does the render method behave on the server vs client, and what adjustments are required?
3
Explain how you would refactor a deeply nested render method that contains many conditional branches to improve readability and maintainability.

8+ years experience

1
We are migrating a large codebase from class components to functional components with hooks. How would you approach the transition of render logic, and what patterns would you enforce to keep behavior consistent?
2
Multiple teams share a UI library with components that have complex render methods. How would you establish guidelines or tooling to ensure render performance and avoid regressions across releases?
3
Our product needs to support theming and feature flags that affect rendering at many levels. Design an architecture that allows render methods to react to these concerns without scattering conditional logic throughout the codebase.

Follow-up Questions

❓Can you give an example of something you should never do inside render?
❓How does React decide when to call render again?
❓What impact does returning a new object each render have on child components?