React Hooks

๐Ÿ”ฅwarning

Be aware that React Hooks are only supported in Functional Components!

useAgile#

The useAgile React Hook, helps us to bind States to our React Component. These binding ensures that the Component rerender, whenever the bound State mutates. We can flexibly bind any State to our Component. It doesn't matter which State and how many States.

const myCoolState = useAgile(MY_COOL_STATE);

useAgile returns the current output of the passed State.

It is also possible to bind more than one State to our Component at once.

const [myCoolState1, myCoolStat2] = useAgile([MY_COOL_STATE1, MY_COOL_STATE2]);

The binding of multiple State Instances, can lower the rerender count of our Component, because it allows AgileTs to combine two rerender triggered by different States at same point in time. Here useAgile returns the output of the passed States, in the same order as they were passed.

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

const [myCollection, myGroup] = useAgile([MY_COLLECTION, MY_GROUP]);

Agile Sub Instances with observer:

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

๐Ÿ”ด Example#

Live Editor
Result

Hello Stranger!

๐ŸŸฆ Typescript#

useAgile is almost 100% typesafe. There are a few side cases you probably won't run into.

๐Ÿ“ญ Props#

PropTypeDescriptionRequired
depArray<SubscribableAgileInstancesType> | SubscribableAgileInstancesTypeAgile Sub Instances that get bound to the Component the useAgile Hook is inYes
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

SubscribableAgileInstancesType#

type SubscribableAgileInstancesType = State | Collection | Observer | undefined;

๐Ÿ“„ Return#

useAgile returns the current output of the passed Agile Sub Instance/s.

const MY_STATE = App.State(1);
const MY_STATE_2 = App.State(2);
const MY_STATE_3 = App.State(3);
// One passed Agile Sub Instance
useAgile(MY_STATE); // Returns 3
// Multiple passed Agile Sub Instances
useAgile([MY_STATE, MY_STATE_2, MY_STATE_3]); // Returns [1, 2, 3]



useEvent#

The useEvent React Hook allows us to register a new callback function to the passed Event.

useEvent(MY_EVENT, () => {
// This is a 'callback function' which gets called when ever the EVENT gets triggered
})

The advantage of using this Hook instead of the on method in a React Component, is that the registered callback function gets automatically unregistered whenever the Component unmounts.

๐Ÿ”ด Example#

Live Editor
Result

๐ŸŸฆ Typescript#

useEvent is almost 100% typesafe.

๐Ÿ“ญ Props#

PropTypeDescriptionRequired
eventEvent (E)Event to which the passed callback function gets applied.Yes
callbackEventCallbackFunction<E['payload']>Callback Function that gets applied to the passed EventYes
keystring | numberKey/Name of created Observer. Mainly thought for Debugging.No
agileInstanceAgileTo which Agile Instance the Event get bound. Gets autodetect!No

๐Ÿ“„ Return#

useEvent returns nothing.




useWatcher#

With the useWatcher React Hook we are able to create a callback function that gets called whenever the passed State mutates. It's a synonym to the watch function, but might be cleaner to read in a React Component.

useWatcher(MY_STATE, () => {
// This is a 'callback function' which gets called whenever MY_STATE mutates
});

๐Ÿ”ด Example#

Live Editor
Result

๐ŸŸฆ Typescript#

useWatcher is almost 100% typesafe.

๐Ÿ“ญ Props#

PropTypeDescriptionRequired
stateState<T>State to which the passed watcher callback gets applied.Yes
callbackStateWatcherCallback<T>Callback Function that gets applied to the passed StateYes

๐Ÿ“„ Return#

useWatcher returns nothing.

Last updated on