AgileHOC is a Higher-Order Component, that helps us to bind States to our React Component.


It is mainly thought for Class Components, because for Functional Components we have create a much neater solution, based on Hooks.

The AgileHOC gets wrapped around our React Class Component, to ensure that our Class Component rerender, whenever a bound State mutates. The output of the passed States gets merged into the props of the Class Component. The property where the State Value is represented in the props is named after the State Key.

export default AgileHOC(RandomComponent, [MY_COOL_STATE]);

If our State has no key, be aware that you have to pass it in Object shape into the AgileHOC, so that it properly can be merged into the props of the Component.

export default AgileHOC(RandomComponent, {
myState: MY_STATE

But it is recommended to use the direct State Value anyway, because it is more reliable and typesafe.

class RandomComponent extends React.Component {
render() {
// return <h1>Hi {this.props.myCoolState}</h1>; // Not Typesafe
return <h1>Hi {MY_COOL_STATE.value}</h1>; // Recommended | More Typesafe
// Wrapping AgileHOC around our Component, and binding MY_COOL_STATE to it
export default AgileHOC(RandomComponent, [MY_COOL_STATE]);

We are not limited to States, we can bind any Agile Sub Instances that own an observer to a React Component.

export default AgileHOC(RandomComponent, [MY_COOL_STATE, MY_GROUP]);

Agile Sub Instances with observer:

  • State
  • Group
  • Computed
  • Item
  • Collection (exception since it has no observer)

๐Ÿ”ด Example#

Live Editor

Direct Value: Hello Stranger!

Props Value: Hello Stranger!

๐ŸŸฆ Typescript#

The AgileHOC is nearly 100% typesafe. But the State Values that get merged into the props aren't typesafe. Because of that reason we recommend using the direct State Value (MY_STATE.value).

๐Ÿ“ญ Props#

reactComponentComponentClassComponent to which the passed Agile Sub Instances get appliedYes
depsDepsTypeAgile Sub Instances that get bound to the ComponentYes
keystring | numberKey/Name of Observer that gets created. Mainly thought for Debugging.No
agileInstanceAgileTo which Agile Instance the State get bound. Gets autodetect if only one Agile Instance exists.No


type DepsType =
| Array<SubscribableAgileInstancesType>
| { [key: string]: SubscribableAgileInstancesType }
| SubscribableAgileInstancesType;


type SubscribableAgileInstancesType = State | Collection | Observer | undefined;

๐Ÿ“„ Return#

AgileHOC returns a modified version of the React Component that got passed in.

Last updated on