higher Order components

vs.

Render Props

Component Composition in react

a quick history

 

  • React included a mixin system as an escape hatch to ease the initial adoption and learning

 

  • Ultimately abandoned by React because of implicit dependencies, namespace clashes, and complexity

Higher order components

  • pure function with zero side-effects
  • composes the original component by wrapping it in a container component
  • instead of maintaining state in the component, we just get that state as a prop from the wrapper

Higher Order components

  • pure function with zero side-effects
  • composes the original component by wrapping it in a container component
  • instead of maintaining state in the component, we get that state as a prop from the wrapper

😓

  • as the user of an HOC it’s not explicit what props will be added

  • doesn’t protect you from prop collision

  • creates a layer of abstraction that can make it difficult to test and debug

Render props

  • function prop that a component uses to know what to render
  • called inside of the render method

HOC

  • static composition
  • doesn’t protect you from prop collision
  • creates indirection, passing of state is implicit

Render prop

  • can negate the performance benefits of React.PureComponent
  • passing of state is explicit
  • dynamic composition
  • avoids prop collision
  • developer composing the components owns how state is passed around and used
Made with Slides.com