Higher Order Components

A higher-order component's role is to wrap a regular component to pass it a specific prop (such as a list of posts, the current user, the Router object, etc.). You can think of HOCs as specialised assistants that each hand the component a tool it needs to do its job.

The first argument of set is the component's name, the second is the component itself, and any successive arguments will be interpreted as higher-order components and wrapped around the component.

For example, this is how you'd pass the currentUser object to the Logo component:

await BB.Components.register({
    key: 'Logo',
    value: LogoComponent,
    hocs: [withCurrentUser]
});

"Delayed" HoCs

There are a few subtle differences between registering a component with register and the more standard export default Foo and import Foo from './Foo.jsx' ES6 syntax.

First, you can only override a component if it's been registered using register. This means that if you're building any kind of theme or plugin and would like end users to be able to replace specific components, you shouldn't use import/export.

Second, both techniques also lead to different results when it comes to higher-order components (more on this below). If you write export withCurrentUser(Foo), the withCurrentUser function will be executed immediately, which will trigger an error because the fragment it depends on isn't properly initialised yet.

On the other hand, register doesn't execute the function (note that we write withCurrentUser and not withCurrentUser()), delaying execution until app's initialisation.

But what about HoC functions that take arguments? For example if you were to write:

await BB.Components.register({
    key: 'PostsList',
    value: PostsList,
    hocs: [withList(options)]
});

The withList(options) would be executed immediately, and you would have no way of overriding the options object later on (a common use case being overriding a fragment).

For that reason, to delay the execution until the start of the app, you can use the following alternative syntax:

await BB.Components.register({
    key: 'PostsList',
    value: PostsList,
    hocs: [
        [withList, options]
    ]
});

Add HOCs to existing Components

You can add new HOCs to the already registered components any time by using the addHocs method.

BB.Components.addHocs('PostsList', withCurrentUser);