Be aware that React Hooks are only supported in Functional Components!
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.
useAgile returns the current output of the passed State.
It is also possible to bind more than one State to our Component at once.
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.
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
observer to a React Component.
Agile Sub Instances with
- Collection (exception since it has no
useAgile is almost 100% typesafe.
There are a few side cases you probably won't run into.
|Array<SubscribableAgileInstancesType> | SubscribableAgileInstancesType||Agile Sub Instances that get bound to the Component the useAgile Hook is in||Yes|
|string | number||Key/Name of Observer that gets created. Mainly thought for Debugging.||No|
|Agile||To which Agile Instance the State get bound. Gets autodetect if only one Agile Instance exists.||No|
useAgile returns the current
output of the passed Agile Sub Instance/s.
useEvent React Hook allows us to register a new callback function to the passed Event.
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.
useEvent is almost 100% typesafe.
|Event (E)||Event to which the passed callback function gets applied.||Yes|
|EventCallbackFunction<E['payload']>||Callback Function that gets applied to the passed Event||Yes|
|string | number||Key/Name of created Observer. Mainly thought for Debugging.||No|
|Agile||To which Agile Instance the Event get bound. Gets autodetect!||No|
useEvent returns nothing.
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 is almost 100% typesafe.
|State<T>||State to which the passed watcher callback gets applied.||Yes|
|StateWatcherCallback<T>||Callback Function that gets applied to the passed State||Yes|
useWatcher returns nothing.