ReactJS Render Props

Last modified on: September 7, 2025

<h1 data-start="382" data-end="413">⚛️ <strong data-start="387" data-end="411">ReactJS Render Props</strong></h1>
<p data-start="415" data-end="647">A <strong data-start="417" data-end="432">Render Prop</strong> is a <strong data-start="438" data-end="455">function prop</strong> that a component uses to know <strong data-start="486" data-end="504">what to render</strong>.<br data-start="505" data-end="508" />It&rsquo;s a pattern in React used to <strong data-start="540" data-end="574">share logic between components</strong> without duplicating code or relying on higher-order components (HOCs).</p>
<p data-start="649" data-end="734">👉 In simple words: <strong data-start="669" data-end="732">Render Props allow components to pass JSX using a function.</strong></p>
<hr data-start="736" data-end="739" />
<h2 data-start="741" data-end="764">🔹 <strong data-start="747" data-end="764">Basic Example</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// DataProvider.js
import React from "react";

class DataProvider extends React.Component {
  state = { data: "Hello from Render Props!" };

render() {
    return this.props.render(this.state.data);
  }
}

export default DataProvider;
</code></pre>
</div>
</div>
</div>
</div>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>// App.js
import React from "react";
import DataProvider from "./DataProvider";

function App() {
  return (
    &lt;div&gt;
      &lt;h1&gt;Render Props Example&lt;/h1&gt;
      &lt;DataProvider render={(data) =&gt; &lt;p&gt;{data}&lt;/p&gt;} /&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1277" data-end="1375">✅ Here, <code data-start="1285" data-end="1293">render</code> is a <strong data-start="1299" data-end="1328">function passed as a prop</strong>, and <code data-start="1334" data-end="1348">DataProvider</code> decides when to call it.</p>
<hr data-start="1377" data-end="1380" />
<h2 data-start="1382" data-end="1425">🔹 <strong data-start="1388" data-end="1425">Real-World Example: Mouse Tracker</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

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

render() {
    return (
      &lt;div
        style={{ height: "100vh" }}
        onMouseMove={this.handleMouseMove}
      &gt;
        {this.props.render(this.state)}
      &lt;/div&gt;
    );
  }
}

// App.js
function App() {
  return (
    &lt;MouseTracker
      render={({ x, y }) =&gt; (
        &lt;h2&gt;
          Mouse position: {x}, {y}
        &lt;/h2&gt;
      )}
    /&gt;
  );
}
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1971" data-end="2067">✅ The <code data-start="1977" data-end="1991">MouseTracker</code> component handles the logic, and the UI is controlled by the render prop.</p>
<hr data-start="2069" data-end="2072" />
<h2 data-start="2074" data-end="2109">🔹 <strong data-start="2080" data-end="2109">When to Use Render Props?</strong></h2>
<ul data-start="2110" data-end="2311">
<li data-start="2110" data-end="2197">
<p data-start="2112" data-end="2197">To share logic across components (e.g., authentication, data fetching, UI effects).</p>
</li>
<li data-start="2198" data-end="2254">
<p data-start="2200" data-end="2254">When you want <strong data-start="2214" data-end="2229">flexibility</strong> in how UI is rendered.</p>
</li>
<li data-start="2255" data-end="2311">
<p data-start="2257" data-end="2311">As an alternative to Higher-Order Components (HOCs).</p>
</li>
</ul>
<hr data-start="2313" data-end="2316" />
<h2 data-start="2318" data-end="2347">📊 <strong data-start="2324" data-end="2347">Render Props vs HOC</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="2349" data-end="2801">
<thead data-start="2349" data-end="2420">
<tr data-start="2349" data-end="2420">
<th data-start="2349" data-end="2372" data-col-size="sm">Feature</th>
<th data-start="2372" data-end="2387" data-col-size="sm">Render Props</th>
<th data-start="2387" data-end="2420" data-col-size="sm">Higher-Order Components (HOC)</th>
</tr>
</thead>
<tbody data-start="2493" data-end="2801">
<tr data-start="2493" data-end="2579">
<td data-start="2493" data-end="2516" data-col-size="sm">Definition</td>
<td data-start="2516" data-end="2546" data-col-size="sm">Function prop for rendering</td>
<td data-start="2546" data-end="2579" data-col-size="sm">Function wrapping a component</td>
</tr>
<tr data-start="2580" data-end="2652">
<td data-start="2580" data-end="2603" data-col-size="sm">Flexibility</td>
<td data-start="2603" data-end="2630" data-col-size="sm">High (custom UI per use)</td>
<td data-start="2630" data-end="2652" data-col-size="sm">Fixed UI structure</td>
</tr>
<tr data-start="2653" data-end="2730">
<td data-start="2653" data-end="2676" data-col-size="sm">Readability</td>
<td data-start="2676" data-end="2709" data-col-size="sm">Can get nested (prop drilling)</td>
<td data-start="2709" data-end="2730" data-col-size="sm">Cleaner structure</td>
</tr>
<tr data-start="2731" data-end="2801">
<td data-start="2731" data-end="2754" data-col-size="sm">Common Use Cases</td>
<td data-col-size="sm" data-start="2754" data-end="2776">Sharing state logic</td>
<td data-col-size="sm" data-start="2776" data-end="2801">Adding extra behavior</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<h2 data-start="158" data-end="210">🔹 <strong data-start="164" data-end="210">Example 1: Mouse Tracker with Render Props</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState, useEffect } from "react";

function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() =&gt; {
    const handleMouseMove = (event) =&gt;
      setPosition({ x: event.clientX, y: event.clientY });

window.addEventListener("mousemove", handleMouseMove);

return () =&gt; window.removeEventListener("mousemove", handleMouseMove);
  }, []);

return position;
}

function App() {
  const { x, y } = useMousePosition();

return (
    &lt;div style={{ height: "100vh" }}&gt;
      &lt;h2&gt;
        Mouse position: {x}, {y}
      &lt;/h2&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="801" data-end="903">✅ Works fine, but requires <strong data-start="828" data-end="855">nested render functions</strong> and can get messy with multiple render props.</p>
<hr data-start="905" data-end="908" />
<h2 data-start="910" data-end="967">🔹 <strong data-start="916" data-end="965">Example 2: Mouse Tracker with Hooks (Cleaner)</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState, useEffect } from "react";

function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

useEffect(() =&gt; {
    const handleMouseMove = (event) =&gt;
      setPosition({ x: event.clientX, y: event.clientY });

window.addEventListener("mousemove", handleMouseMove);

return () =&gt; window.removeEventListener("mousemove", handleMouseMove);
  }, []);

return position;
}

function App() {
  const { x, y } = useMousePosition();

return (
    &lt;div style={{ height: "100vh" }}&gt;
      &lt;h2&gt;
        Mouse position: {x}, {y}
      &lt;/h2&gt;
    &lt;/div&gt;
  );
}

export default App;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1613" data-end="1628">✅ With Hooks:</p>
<ul data-start="1629" data-end="1772">
<li data-start="1629" data-end="1656">
<p data-start="1631" data-end="1656">No render props needed.</p>
</li>
<li data-start="1657" data-end="1728">
<p data-start="1659" data-end="1728">Cleaner, reusable logic via a <strong data-start="1689" data-end="1704">custom hook</strong> (<code data-start="1706" data-end="1724">useMousePosition</code>).</p>
</li>
<li data-start="1729" data-end="1772">
<p data-start="1731" data-end="1772">Easy to use across multiple components.</p>
</li>
</ul>
<hr data-start="1774" data-end="1777" />
<h2 data-start="1779" data-end="1822">📊 <strong data-start="1785" data-end="1822">Comparison: Render Props vs Hooks</strong></h2>
<div class="_tableContainer_1rjym_1">
<div class="_tableWrapper_1rjym_13 group flex w-fit flex-col-reverse" tabindex="-1">
<table class="w-fit min-w-(--thread-content-width)" data-start="1824" data-end="2667">
<thead data-start="1824" data-end="1942">
<tr data-start="1824" data-end="1942">
<th data-start="1824" data-end="1850" data-col-size="sm">Feature</th>
<th data-start="1850" data-end="1895" data-col-size="md">Render Props</th>
<th data-start="1895" data-end="1942" data-col-size="sm">Hooks (useState/useEffect)</th>
</tr>
</thead>
<tbody data-start="2063" data-end="2667">
<tr data-start="2063" data-end="2182">
<td data-start="2063" data-end="2089" data-col-size="sm">Syntax</td>
<td data-start="2089" data-end="2134" data-col-size="md">Function as a prop (<code data-start="2111" data-end="2119">render</code>)</td>
<td data-start="2134" data-end="2182" data-col-size="sm">Custom hooks (<code data-start="2150" data-end="2164">useSomething</code>)</td>
</tr>
<tr data-start="2183" data-end="2303">
<td data-start="2183" data-end="2209" data-col-size="sm">Readability</td>
<td data-start="2209" data-end="2255" data-col-size="md">Can lead to nested functions (wrapper hell)</td>
<td data-start="2255" data-end="2303" data-col-size="sm">Cleaner and flatter code</td>
</tr>
<tr data-start="2304" data-end="2424">
<td data-start="2304" data-end="2330" data-col-size="sm">Reusability</td>
<td data-start="2330" data-end="2376" data-col-size="md">Good</td>
<td data-start="2376" data-end="2424" data-col-size="sm">Excellent (hooks are more portable)</td>
</tr>
<tr data-start="2425" data-end="2548">
<td data-start="2425" data-end="2452" data-col-size="sm">Learning Curve</td>
<td data-start="2452" data-end="2501" data-col-size="md">Slightly higher (understanding function props)</td>
<td data-start="2501" data-end="2548" data-col-size="sm">Lower, once hooks basics are clear</td>
</tr>
<tr data-start="2549" data-end="2667">
<td data-start="2549" data-end="2575" data-col-size="sm">Modern Best Practice</td>
<td data-start="2575" data-end="2620" data-col-size="md">❌ Older pattern (less common now)</td>
<td data-start="2620" data-end="2667" data-col-size="sm">✅ Preferred in modern React apps</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 data-start="2674" data-end="2692">&nbsp;</h2>
</div>
</div>
<hr data-start="2803" data-end="2806" />
<h2 data-start="2808" data-end="2826">✅ <strong data-start="2813" data-end="2824">Summary</strong></h2>
<ul data-start="2827" data-end="3121">
<li data-start="2827" data-end="2887">
<p data-start="2829" data-end="2887">Render Props is a <strong data-start="2847" data-end="2875">pattern for code sharing</strong> in React.</p>
</li>
<li data-start="2888" data-end="2948">
<p data-start="2890" data-end="2948">It uses <strong data-start="2898" data-end="2920">functions as props</strong> to dynamically decide UI.</p>
</li>
<li data-start="2949" data-end="3012">
<p data-start="2951" data-end="3012">Helps keep logic reusable while maintaining UI flexibility.</p>
</li>
<li data-start="3013" data-end="3121">
<p data-start="3015" data-end="3121">Can sometimes lead to <strong data-start="3037" data-end="3072">nested functions (wrapper hell)</strong> &rarr; Hooks are often a cleaner alternative today.</p>
</li>
</ul>

Web Technology View More