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