ReactFoo Hyderabad

On React, alternatives to React, ReactNative and front-end engineering

Demystifying Higher order components and Render Props

Submitted by Nitish Phanse (@nitish24p) on Sunday, 28 January 2018

videocam_off

Technical level

Intermediate

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +7

Abstract

Higher order components (HOC) and render props are two advanced react patterns which help in reusability and composition of components. Both of them can easily be interchanged in their respective use cases, but they do have fine lines of distinction. I wish to explain the use cases of HOC and RPs and their respective pros and cons so that you can apply them to your daily code as need be.

Outline

Breaking down the talk into points and sub points

Outline

  1. What are higher order functions, very minimal example to explain the concept
  2. What are Higher Order components, when should you use a higher order component
    a. Why did higher order components come into being b. Example of a Higher order Component as a presentational component for rendering initial data for server side rendering c. Common examples, compose, recompose of redux

  3. What are Render props, when should you use a render prop
    a. Example of a render prop being used for rendering initial data for server side rendering
    b. Composing multiple components together with Render props c. Common examples, withRouter of react router

  4. Differences between HOC and RPs
    Pros and Cons of each, differences, when to use either?

Requirements

Some idea of how components are reused in react.

Speaker bio

I am a senior developer at KyePot, Mumbai. I work as a javascript for my team. I’ve had over 2 and a half years experience working with React and React Native and Node and keep experimenting with React patterns and perf improvement trends. At kyepot recently, we rewrote and refactored an entire chunk of our front end code converting most of our HOCs to render props as, it served our purpose better and made the code more readable and reusable. Hence i thought i’d like to share my learnings with everyone.

Links

Comments

Login with Twitter or Google to leave a comment