React js Render Props Practice Questions with Solutions

Introduction

Render Props is a React pattern used to share reusable logic between components by passing a function as a prop. Instead of deciding exactly what UI to render, a component provides data or behavior to another component through this function. Render Props are useful for understanding older and advanced React patterns, especially in existing codebases. In this chapter, we will solve React js Render Props Practice Questions with Solutions.

1. What are Render Props in React?

Render Props is a pattern where a component receives a function as a prop and calls that function to decide what should be rendered.

Example:

function DataProvider({ render }) {
  const name = "Rahul";

  return render(name);
}

function App() {
  return (
    <DataProvider
      render={(name) => <h2>Hello, {name}</h2>}
    />
  );
}

export default App;

Output:

Hello, Rahul

Here:

render={(name) => <h2>Hello, {name}</h2>}

is a function passed as a prop.

The DataProvider component controls the data, while the parent decides how that data should appear.

2. Create a Simple React Render Props Component

Let’s create a component that provides a counter value to another component.

import { useState } from "react";

function Counter({ render }) {
  const [count, setCount] = useState(0);

  return render(count, () => setCount((c) => c + 1));
}

function App() {
  return (
    <Counter
      render={(count, increment) => (
        <div>
          <h2>Count: {count}</h2>
          <button onClick={increment}>
            Increase
          </button>
        </div>
      )}
    />
  );
}

export default App;

The Counter component manages the state.

The render function decides how to display it.

Output initially:

Count: 0

[Increase]

After clicking the button:

Count: 1

This separates reusable behavior from the UI that uses it.

3. Pass Multiple Values Through a Render Prop

A render prop can receive more than one value.

function UserData({ render }) {
  const user = {
    name: "Amit",
    age: 22
  };

  return render(user.name, user.age);
}

function App() {
  return (
    <UserData
      render={(name, age) => (
        <div>
          <h2>{name}</h2>
          <p>Age: {age}</p>
        </div>
      )}
    />
  );
}

export default App;

Output:

Amit
Age: 22

The UserData component provides:

name
age

The render function decides how to use those values.

4. Use Children as a Render Prop

The render prop pattern does not always require a prop named render. A function can also be passed through children.

function MouseTracker({ children }) {
  const position = {
    x: 100,
    y: 200
  };

  return children(position);
}

function App() {
  return (
    <MouseTracker>
      {(position) => (
        <h2>
          Mouse: {position.x}, {position.y}
        </h2>
      )}
    </MouseTracker>
  );
}

export default App;

Output:

Mouse: 100, 200

Here, children contains a function:

{(position) => (
  <h2>
    Mouse: {position.x}, {position.y}
  </h2>
)}

The component calls:

children(position)

This is often called the function-as-children form of the Render Props pattern.

5. Create a Render Props Component for Loading Data

Render Props can be used to share loading behavior.

import { useEffect, useState } from "react";

function DataLoader({ render }) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      setData({
        name: "Laptop",
        price: 50000
      });

      setLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return render({ loading, data });
}

function App() {
  return (
    <DataLoader
      render={({ loading, data }) => {
        if (loading) {
          return <h2>Loading...</h2>;
        }

        return (
          <div>
            <h2>{data.name}</h2>
            <p>Price: ₹{data.price}</p>
          </div>
        );
      }}
    />
  );
}

export default App;

The DataLoader component manages the data and loading state.

The render function controls the UI.

6. Use Render Props to Create a Search Component

A Render Props component can provide search functionality to different UIs.

import { useState } from "react";

function SearchBox({ items, render }) {
  const [search, setSearch] = useState("");

  const filteredItems = items.filter((item) =>
    item.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div>
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search..."
      />

      {render(filteredItems)}
    </div>
  );
}

function App() {
  const products = [
    "Laptop",
    "Mouse",
    "Keyboard",
    "Monitor"
  ];

  return (
    <SearchBox
      items={products}
      render={(results) => (
        <ul>
          {results.map((product) => (
            <li key={product}>{product}</li>
          ))}
        </ul>
      )}
    />
  );
}

export default App;

The SearchBox component handles:

• Search state
• Input changes
• Filtering

The parent decides how the results should be displayed.

7. What is the Difference Between Render Props and Normal Props?

Normal props usually pass values, objects, arrays, or functions to a component.

Example:

<User name="Rahul" />

Here, name is a normal value prop.

With Render Props, a function is specifically used to control what the component renders:

<DataProvider
  render={(data) => <h2>{data.name}</h2>}
/>

Main Difference

A render prop is still technically a prop—the difference is how the function prop is used.

8. Can Render Props Share State Between Components?

Render Props can share access to stateful logic.

For example:

import { useState } from "react";

function Toggle({ children }) {
  const [isOn, setIsOn] = useState(false);

  function toggle() {
    setIsOn((value) => !value);
  }

  return children({
    isOn,
    toggle
  });
}

function App() {
  return (
    <Toggle>
      {({ isOn, toggle }) => (
        <div>
          <h2>{isOn ? "ON" : "OFF"}</h2>

          <button onClick={toggle}>
            Toggle
          </button>
        </div>
      )}
    </Toggle>
  );
}

export default App;

The Toggle component owns the state.

The child function receives:

{
  isOn,
  toggle
}

This allows the UI to use the shared behavior.

9. What is the Difference Between Render Props and Higher-Order Components?

Both Render Props and Higher-Order Components can be used to reuse component logic, but they use different approaches.

Higher-Order Component

An HOC takes a component and returns an enhanced component:

const EnhancedComponent = withLoading(Component);

Render Props

A component receives a function and calls it with reusable data or behavior:

<DataProvider
  render={(data) => <Component data={data} />}
/>

Main Difference

Both are reusable patterns, but modern React code often uses Custom Hooks for sharing stateful logic when possible.

10. Build a Practical Render Props Counter

Let’s build a reusable counter that allows the parent component to decide the complete UI.

import { useState } from "react";

function Counter({ children }) {
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount((value) => value + 1);
  };

  const decrease = () => {
    setCount((value) => value - 1);
  };

  const reset = () => {
    setCount(0);
  };

  return children({
    count,
    increase,
    decrease,
    reset
  });
}

function App() {
  return (
    <Counter>
      {({ count, increase, decrease, reset }) => (
        <div>
          <h2>Counter: {count}</h2>

          <button onClick={decrease}>
            -
          </button>

          <button onClick={increase}>
            +
          </button>

          <button onClick={reset}>
            Reset
          </button>
        </div>
      )}
    </Counter>
  );
}

export default App;

How it works

1. Counter stores the count using useState.
2. increase, decrease, and reset update the state.
3. The component passes these values to children.
4. children is a function.
5. The function receives the counter data.
6. The function decides what UI should be displayed.

This is the main idea behind Render Props:

Reusable Logic
      ↓
Render Props Component
      ↓
Data + Functions
      ↓
Render Function
      ↓
Custom UI

Key Takeaways

• Render Props is a React pattern for sharing reusable logic through a function prop.
• A render prop is usually a function passed as a prop such as render.
• The function can also be passed through children.
• The component providing the render prop can manage state and behavior.
• The render function decides how the received data should be displayed.
• Render Props can be used for counters, search, loading, mouse tracking, and other reusable behaviors.
• Render Props and Higher-Order Components are different patterns for sharing logic.
• Render Props do not require a prop to be specifically named render.
• Function-as-children is a common form of the Render Props pattern.
• Custom Hooks are often preferred in modern React for sharing stateful logic, but Render Props remain useful for understanding existing React patterns.

FAQs

1. What are Render Props in React?

Render Props is a React component pattern where a component receives a function as a prop and calls that function to decide what UI should be rendered.

2. Why are Render Props used in React?

Render Props are used to share reusable logic between React components while allowing each component to control how that shared logic is displayed.

3. How do Render Props work in React?

A component accepts a function as a prop, usually called a render prop, and passes data or state to that function. The function then returns the React elements that should be rendered.

4. Are Render Props a React Component Pattern?

Yes. Render Props are a commonly used React Component Pattern for sharing component logic and creating flexible, reusable components.

5. What is the difference between Render Props and regular Props in React?

Regular props usually pass data or values to a component, while a Render Prop passes a function that allows the parent component to control what the child component renders.

6. Are Render Props still used in modern React?

Render Props can still be used in React, but Hooks are often preferred for sharing reusable logic in modern React applications because they can provide a simpler approach.

7. What are React js Render Props Practice Questions with Solutions?

React js Render Props Practice Questions with Solutions are practical coding exercises that help learners understand how the Render Props pattern works in React.js. These questions focus on sharing component logic through a function passed as a prop.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar