React Interview Questions

Render props is a pattern in React for sharing code between components using a prop whose value is a function. This function is used to dynamically determine what to render based on the state or props passed to it.

Why Use Render Props?

Render props can be particularly useful for:

• Code reuse: Sharing common logic between components without duplicating code.
• Flexible components: Allowing components to be more flexible and customizable by letting the parent determine what to render.
• Decoupling: Decoupling behavior logic from UI rendering.

How Render Props Work

A component that uses the render props pattern will accept a prop (usually named render or children) that is a function. This function is then called during the render phase of the component, and the returned JSX is rendered.

Example of Render Props

Let's create an example where a render prop is used to share a piece of state between two components.

Step 1: Create a Component with Render Props

import React, { Component } from 'react';

class MouseTracker extends Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

export default MouseTracker;

In this example, MouseTracker is a component that tracks the mouse position and uses a render prop to pass this state to its children.

Step 2: Use the Render Props Component

import React from 'react';
import MouseTracker from './MouseTracker';

function App() {
  return (
    <div>
      <h1>Move the mouse around!</h1>
      <MouseTracker render={({ x, y }) => (
        <h2>The mouse position is ({x}, {y})</h2>
      )} />
    </div>
  );
}

export default App;

Here, the MouseTracker component is used in App, and the render prop is passed a function that receives the mouse position and returns some JSX to display it.

Using children as a Function

An alternative to using a prop named render is to use the children prop to achieve the same effect.

Modified Example:

import React, { Component } from 'react';

class MouseTracker extends Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY,
    });
  };

  render() {
    return (
      <div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
        {this.props.children(this.state)}
      </div>
    );
  }
}

export default MouseTracker;

Using the children prop:

import React from 'react';
import MouseTracker from './MouseTracker';

function App() {
  return (
    <div>
      <h1>Move the mouse around!</h1>
      <MouseTracker>
        {({ x, y }) => (
          <h2>The mouse position is ({x}, {y})</h2>
        )}
      </MouseTracker>
    </div>
  );
}

export default App;

Advantages of Render Props

1. Code Reuse: Allows logic to be reused across multiple components without duplication.
2. Flexibility: Provides more flexibility in how components are composed and rendered.
3. Decoupling Logic from UI: Separates the behavior logic from the presentation logic, making components more modular and easier to test.

Considerations

1. Performance: Can lead to performance issues if not used carefully, as functions are created on each render.
2. Readability: Might make the code harder to read and understand, especially if overused or nested deeply.

Conclusion

Render props is a powerful pattern in React that enables code reuse and flexible component composition. By passing a function as a prop, components can share and reuse behavior logic while keeping the UI code separate. This pattern enhances the modularity and maintainability of React applications, though it should be used judiciously to avoid potential performance and readability issues.