Using Render Props In React

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. More info

Articles & Tutorials

Code-sharing in React using Render Props (codeburst.io)
Feb 09, 2019
Render Props is an increasingly popular method of sharing code between react components. They are called Render Props (or render-props) because they allow “sharing code” via a render prop. But for this exercise, we’ll do the same while sharing code with react’s own children prop for aesthetics.
  • Nadeesha Cabral
Data Fetcher component using Hooks and Render Props (medium.com)
Jan 11, 2019
In most cases, applications that I work with just need to request data from the API and display the result. So, using a sophisticated library like Redux, only complicates the code and increases the bundle size without bringing much of a benefit.
  • Gasim Gasimzada
React Render Props (flaviocopes.com)
Jan 01, 2019
Learn how Render Props can help you build a React application
How to develop your React superpowers with the Render Props Pattern (medium.freecodecamp.org)
Nov 24, 2018
This time I’m going to tell you about this great superpower called “render props”
  • Eduardo Vedes
An Overview of Render Props in React (css-tricks.com)
Nov 16, 2018
Using render props in React is a technique for efficiently re-using code. According to the React documentation, "a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic."
  • Kingsley Silas
Passing state to render props via context (frontarm.com)
Nov 02, 2018
Headless components are a great new way to separate presentation and control logic. But what if you don't want to pick and place all the render function's props manually?
Understanding React Render Props and HOC (blog.bitsrc.io)
Aug 23, 2018
A detailed introduction to Render Props and Higher-Order Components in React
  • Aditya Agarwal
React's Render Props Pattern - Children as a Function (robinwieruch.de)
Aug 08, 2018
The concept of children as a function or child as a function, also called render prop in general, is one of the advanced patterns in React.
Using Composition and Render Props instead of Context API (medium.com)
Aug 05, 2018
If what you are trying to achieve is to just pass down some props without dealing with passing it to every component in between, you don’t have to use Redux or Context API.
  • Baris Ozcetin
Learn Render Props by Example (engineering.dollarshaveclub.com)
Jul 24, 2018
To be honest, React’s render props technique didn’t make sense to me until I saw a practical example, so let’s dive in!
  • Dan Benson
Render Props, Render Callbacks And Higher-Order Components Are All Interchangeable (medium.com)
Jun 12, 2018
All three mentioned patterns solve the same thing that mixins used to solve.
  • Ali Sharif
Mixing Component Patterns (blog.kentcdodds.com)
May 07, 2018
Let’s make a component that supports Render Props, Component Injection, Compound Components, the Provider Pattern, and Higher Order Components!
How To Master Advanced React Design Patterns  -  Render Props (itnext.io)
Apr 17, 2018
This design pattern can be a bit of a head scratcher at first and in order to truly grasp how it exactly works, we need a in-depth understanding of the top level React API and how the JSX code we write is converted to javascript.
  • Shaun David Hutch
Compose Render Props (blog.kentcdodds.com)
Apr 09, 2018
One of the reasons I’m so excited about render props.
When to NOT use Render Props (blog.kentcdodds.com)
Mar 26, 2018
Let’s back up from the hype and think critically about the render props pattern.
Answers to common questions about render props (blog.kentcdodds.com)
Jan 12, 2018
Because there’s a ton of hype, and a bunch of questions.
Testing components using render props (blog.kentcdodds.com)
Jan 08, 2018
Let’s look at how we can write tests for React components that use render props!
React Component Patterns (levelup.gitconnected.com)
Oct 26, 2017
Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more
  • Gustavo Matheus
I’m Breaking up with Higher Order Components (medium.com)
Oct 03, 2017
Writing declarative, readable and flexible React components using render props instead of HOCs.
  • David Atchley

Video Guides & Talks

Powering Code Reuse with Context and Render Props (youtube.com)
Dec 17, 2018
This talk will explain how context and render props work and give you some ideas of how to use them to simplify your own code.
  • Forbes Lindsay
Why & How You Should Use React Render Props (youtube.com)
Apr 26, 2018
You can think of them as dependency injection or as inversion of control. The point is that you pass a component into a component and it lets your consumer define how something gets rendered.
Error Boundaries and Render Props (youtube.com)
Apr 05, 2018
How to implement and test an error boundary in React. Error boundaries allow us to catch errors (and display friendly messages to our users) that occur during render in our components. We'll implement the error boundary using render props and see how to suppress an annoying error message during testing.
Converting a component to a render prop (youtube.com)
Mar 26, 2018
I have a component that needs to have three visual difference implementations, so I decided to make it a render prop component.
Never Write Another HoC - Phoenix ReactJS (youtube.com)
Sep 17, 2017
Michael Jackson, creator of the React Router library, gives this talk where he says a component with a render prop or children prop as renderer can do anything an HoC (Higher Order Component) can do, and more.

Courses & Video Series

Advanced React Component Patterns (egghead.io)
Jun 01, 2018
The goal of this course is to give you the knowledge of advanced patterns you can use to make React components that are more flexible, simpler, and more fun to build, use, and maintain.
Level 2 React (leveluptutorials.com)
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.
Advanced React Component Patterns Workshop @ PayPal (youtube.com)
May 11, 2018
With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
Advanced React Patterns (frontendmasters.com)
May 02, 2018
In this course, Kent C. Dodds shows how to separate component logic, state and display properties to make your components more flexible and usable across large React applications.

Podcast Episodes

The Future of Higher Order Components and Render Props with Paul Gray (devchat.tv)
May 22, 2018
In this episode of React Round Up, the panel discusses the future of higher order components and render props with Paul Gray. They talk about how he got into programming and React, when you would want to use HOCs and render props, and chainable components.
Breaking up with Higher Order Components with David Atchley (devchat.tv)
Apr 17, 2018
In this episode of React Round Up, the panel discuss breaking up with higher-order components with David Atchley. They talk about what higher-order components and render props are and when you would want to use them to help you in your code. They also touch on overuse and misuse of applications and coding tools and the difference between using render props and HOCs.
Kent C. Dodds - Building Reusable React Components with Render Props (fullstackradio.com)
Dec 21, 2017
In this episode, Adam talks to Kent C. Dodds about building downshift, a React autocomplete component he designed for experiences he needed to build at PayPal. Kent gives a behind-the-scenes look at how the library uses the render prop pattern to allow maximum customizability without complex configuration.