Higher-Order Components

Higher-order components (HOCs) are a pattern used for reusing component logic. Just like higher-order functions in JavaScript, Astro can leverage the same compositional nature but with components. Let’s take a look at a simple example that we can use in Astro.

HOCs in Astro

A common use case for an HOC is to conditionally wrap elements—for example, we might want to wrap images with a link if a link is provided for the image. Traditionally, this is done through the use of a ternary operator, like so: