React — Composing Higher-Order Components (HOCs) – Casey Morris – Medium

  • Data is passed down to the wrapped component.LoggerEasily log all prop changes (on render) for a given component, helpful for quick debugging purposes.PropsSometimes you need to inject props into a component, this is especially useful when using a branch HOC and only want a single branch to receive specific props.TimeoutsAdding…
  • This HOC will also spread the current data item as props into the supplied component.HOCsNow that we’ve gone over a few use cases, lets look at some simple implementations before we get into any complex chaining.hasPropsTakes a single parameter, injectedProps and returns a wrapped component with the supplied injectedProps .
  • Useful when you need to inject props to a single component within the branch hoc, as the props supplied are injected into both passing and failing components.Use:Use with branch HOC:hasLoggerTakes a single parameter, prefix which prefixes the logged message, defaults to an empty string.
  • Injects data, hasError, error, useDefault, loading, and loadingMessage as props to be used in the wrapped no parameters and returns a wrapped component with injected props addTimeout and clearTimeouts.
  • This page includes a MockPostContainer which extends the Post component with a logger, mock data, loader, error, default, and list.Posts, Todos, Comments, and Users PagesAll of these pages consume real API endpoints from They each extend a single component (Post, Todo, Comment, User) with the isContainer and isList HOCs.Wrapping UpI hope…

To put it simply, a higher-order component is a function, that takes a component and returns a new component. I like to think of them as parameterized components. Many times I find myself creating…
Continue reading “React — Composing Higher-Order Components (HOCs) – Casey Morris – Medium”