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
Component Composition
By Kaitlin Moreno
Component Composition
- 957