@@ -7,42 +7,129 @@ slug: /react/hooks
77
88::: warning
99
10- Be aware that [ React Hooks] ( https://reactjs.org/docs/hooks-intro.html ) are only supported in ** Functional Components** !
10+ Be aware that [ React Hooks] ( https://reactjs.org/docs/hooks-intro.html ) are only supported in ** Functional React Components** !
1111
1212:::
1313
1414
1515## ` useAgile `
1616
17- The ` useAgile ` React Hook, helps us to bind States to our React Component.
18- These binding ensures that the Component rerender, whenever the bound State mutates.
19- We can flexibly bind any State to our Component.
20- It doesn't matter which State and how many States.
17+ The ` useAgile() ` React Hook, helps us to bind States to Functional React Components.
18+ This binding ensures that the Component rerender, whenever the bound State mutates.
19+ We can flexibly bind any State to any React Component.
2120``` ts
2221 const = useAgile (MY_COOL_STATE );
2322```
24- ` useAgile ` returns the current _ output_ of the passed State.
23+ ` useAgile() ` returns the current ` value ` of the passed State.
24+ ``` ts
25+ const = App .createState (' jeff'
26+
27+ // myComponent.jsx
2528
26- It is also possible to bind more than one State to our Component at once.
29+ const = useAgile (MY_STATE );
30+ console .log (myState ); // Returns 'jeff'
31+ ```
32+ It is also possible to bind more than one State at once to a React Component.
2733``` ts
28- const myCoolStat2 ] = useAgile ([MY_COOL_STATE1 , MY_COOL_STATE2 ]);
34+ const myCoolState2 ] = useAgile ([MY_COOL_STATE1 , MY_COOL_STATE2 ]);
2935```
30- The binding of multiple State Instances, can lower the rerender count of our Component,
31- because it allows AgileTs to combine two rerender triggered by different States at same point in time.
32- Here ` useAgile ` returns the _ output_ of the passed States, in the same order
33- as they were passed.
36+ Now ` useAgile() ` returns an array of State ` values ` that can be destructured.
37+ ``` ts
38+ const = App .createState (' jeff'
39+ const = App .createState (' frank'
40+
41+ // myComponent.jsx
42+
43+ const = useAgile ([MY_STATE , MY_STATE_2 ]);
44+ console .log (myState ); // Returns 'jeff'
45+ console .log (myState2 ); // Returns 'frank'
46+ ```
47+ The binding of multiple State Instances at once has one advantage.
48+ It can lower the rerender count of the React Component,
49+ because AgileTs combines multiple at the same point in time triggered rerender of different States,
50+ if they have the same ` SubscriptionContainer ` . Each used ` useAgile() ` creates its own ` SubscriptionContainer ` .
3451
3552We are not limited to States, we can bind any [ Agile Sub Instance] ( ../../../main/Introduction.md#agile-sub-instance ) that owns
3653an ` observer ` to a React Component.
3754``` ts
3855 const = useAgile ([MY_COLLECTION , MY_GROUP ]);
3956```
40- [ Agile Sub Instance] ( ../../../main/Introduction.md#agile-sub-instance ) with ` observer ` :
41- - State
42- - Group
43- - Computed
44- - Item
45- - Collection (_ exception_ since it has no ` observer ` )
57+ Instances that can be bound to a React Component via the ` useAgile() ` Hook:
58+ - ### [ ` State ` ] ( ../../core/features/state/Introduction.md )
59+ ``` ts
60+ const = App .createState (' jeff'
61+
62+ // myComponent.jsx
63+
64+ const = useAgile (MY_STATE );
65+ console .log (myState ); // Returns 'jeff'
66+ ```
67+ - ### [ ` Computed ` ] ( ../../core/features/computed/Introduction.md )
68+ ``` ts
69+ const = App .createComputed (() => ' hello there'
70+
71+ // myComponent.jsx
72+
73+ const = useAgile (MY_COMPUTED );
74+ console .log (myComputed ); // Returns 'hello there'
75+ ```
76+ - ### [ ` Collection ` ] ( ../../core/features/collection/Introduction.md )
77+ ** Note:** The Collection has no own ` observer ` .
78+ But ` useAgile() ` is smart enough, to identify the Collection under the hood
79+ and binds the [ ` defualt ` Group] ( ../../core/features/collection/group/Introduction.md#-default-group ) to the Component instead.
80+ The ` default ` Group represents the default pattern of the Collection.
81+ ``` ts
82+ const = App .createCollection ({
83+ initialData: [{id: 1 , name: ' a' 2 , name: ' b' 3 , name: ' c'
84+ });
85+
86+ // myComponent.jsx
87+
88+ const = useAgile (MY_COLLECTION );
89+ console .log (myCollection ); // Returns (see below)
90+ // '[{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}]'
91+ ```
92+ - ### [ ` Group ` ] ( ../../core/features/collection/group/Introduction.md )
93+ ``` ts
94+ const = App .createCollection ({
95+ initialData: [{id: 1 , name: ' a' 2 , name: ' b' 3 , name: ' c'
96+ });
97+ const = MY_COLLECTION .createGroup (' myGroup' 3 , 1 ]);
98+
99+ // myComponent.jsx
100+
101+ const = useAgile (MY_GROUP );
102+ console .log (myGroup ); // Returns '[{id: 3, name: 'c'}, {id: 1, name: 'a'}]'
103+ ```
104+ - ### [ ` Selector ` ] ( ../../core/features/collection/selector/Introduction.md )
105+ ``` ts
106+ const = App .createCollection ({
107+ initialData: [{id: 1 , name: ' a' 2 , name: ' b' 3 , name: ' c'
108+ });
109+ const = MY_COLLECTION .select (2 );
110+
111+ // myComponent.jsx
112+
113+ const = useAgile (MY_SELECTOR );
114+ console .log (mySelector ); // Returns '{id: 2, name: 'b'}'
115+ ```
116+ - ### [ ` Item ` ] ( ../../core/features/collection/Introduction.md#-item )
117+ ``` ts
118+ const = App .createCollection ({
119+ initialData: [{id: 1 , name: ' a' 2 , name: ' b' 3 , name: ' c'
120+ });
121+ const = MY_COLLECTION .getItem (3 );
122+
123+ // myComponent.jsx
124+
125+ const = useAgile (MY_ITEM );
126+ console .log (myItem ); // Returns '{id: 3, name: 'c'}'
127+ ```
128+ - ### ` undefined `
129+ ``` ts
130+ const = useAgile (undefined );
131+ console .log (myUndefined ); // Returns 'undefined'
132+ ```
46133
47134### 🔴 Example
48135
0 commit comments