Higher-Order Components (HOC)
Most of the components needed to load a JSON file on
componentDidMount. Some file URLs were based on route parameters so I would need to update the data with
This would normally result in a lot of copy / paste functions in multiple components. Since the DRY principal tries to avoid redundancy, I decided to wrap them into a higher-order component, which allowed me to reuse a lot of the component logic.
Extracting parameters from the route
While building the aforementioned HOC, I ran into another issue. The HOC had to be declared before it was mounted, which meant
this and subsequently
props were undefined; I couldn't pass the route parameters to it.
My solution was to pass the route pattern, which was constant, and using the url-pattern package, I managed to reverse-engineer the route parameters during
componentDidMount of the HOC component.