Design Pattern

With each passing day, we are to keep increasing the lines of codes in our project, sometimes they can get messy as well. As time goes on, if left alone there will only a big pile of messy codes that’s in our project. Having good refactoring to counteract this will push you ahead in making a good structured codes.

A pile of mess turning into a nice string of circle

REACT HOC

Higher Order Component (HOC) is a design pattern that is created to utilize the React’s compositional nature. This pattern works by reusing the component logic that is present inside REACT.

The benefit of using HOC is that we are able to reuse the code inside our application, especially when there are a lot of similarities or even duplication inside the codes.

Moodah implementation

Inside our project we are asked to use HOC as the design pattern for our front-end. It is understandable why, inside our software there will be a lot of components/pages that have similar or the same features (e.g. filter, forms, etc.)

The code above is shown, courtesy to Nicolaus CJ

Now with this, the models that we have could follow the base components and have their own “added value”. In the code above, the PosConfigs will give the same additional value which are: filters, offset, limit. Of course depending on our need we could remove these additional value if not needed, because not all table need filters/offset/limit in them.

Now that we know how that the design pattern could help us, we are to hope to do better as time goes on.

bey