How to write a HOC (in 3 easy steps).

Simplest definition of HOC in #reactjs  #javascript #hoc #highordercomponent

  • If you find yourself doing this a lot, you should look for ways to reuse code and solutions that are similar.
  • When it mounts, it fires an xhr request to fetch a user’s details, and then displays them: – – Let’s design another similar component for fetching and displaying a list of tweets.
  • This one will do the same thing: when it mounts, it fires an xhr request to fetch some tweets, and then displays them: – – These two components are very similar; they fetch some data, and then display it, showing a ‘loading’ view while the request is loading.
  • Let’s take the common elements, and put them into a function: – – Now that we have the similar code in a function, let’s make the different code (the url and view) parameters of that function: – – (Notice how we pass the data down to the view).
  • Now, let’s re-implement our two components using this shiny new HOC: – – We’ve cut out a ton of our code duplication, making our solutions simpler and easier to manage.

Learn how to write a Higher Order Component for React in 3 easy steps.
Continue reading “How to write a HOC (in 3 easy steps).”