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…

IntroTo 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 several components with very similar logic, with only 1 or 2 changes. Once I find a use case like this, it’s very simple to abstract the shared logic, and put the logic that changes into parameters. You can read more about HOCs here, in the official React docs. Since components are just functions and HOCs are just functions that return other functions, we can use functional concepts to chain them using utilities methods such as compose, which is provided by many libraries (it’s included in Redux!).I’m going to talk about a few common use cases, then go over their implementation, and a few ways they can be composed together to make even more powerful HOCs!Follow Along (Example App)You can following along with a simple React app I create to demonstrate the following concepts and use cases. It can be used in browser or cloned from the repository.Live sandbox: repo: CasesNow that we know a little about higher-order components, we can go over a few common use cases.LoaderIt’s common to pull data from an API and display a “spinner” or message until the data has been fetched. You may have a standard Loading component which has a prop message for displaying a loading message specific to your current application.ErrorAlmost identical to the Loader HOC, but instead displays an…

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