added useProxy example

Author: bennobuilder

docs/examples/Indroduction.md

@@ -10,5 +10,5 @@ That's why we've put together a few examples for you.
 If that's not enough, you can find even more examples in the [AgileTs repository](https://github.com/agile-ts/agile/tree/master/examples).
 
 ## 🚀 Quick Links
-- [React](./react/All.mdx)
-- [React-Native](./react-native/All.mdx)
+- [React](./react/Introduction.md)
+- [React-Native](./react-native/Introduction.md)

docs/examples/react-native/Introduction.md

@@ -6,4 +6,4 @@ slug: /examples/react-native
 ---
 
 ## 🤠 Get Started
-- [First State](./first-state)
+- [First State](./react-native/first-state)

docs/examples/react/Introduction.md

@@ -6,20 +6,21 @@ slug: /examples/react
 ---
 
 ## 🤠 Get Started
-- [First Collection](./first-collection)
-- [First Computed](./first-computed)
-- [First State](./first-state)
-- [First State [Class Component]](./class/first-state)
-- [Multieditor](./multieditor)
+- [First Collection](./react/first-collection)
+- [First Computed](./react/first-computed)
+- [First State](./react/first-state)
+- [First State [Class Component]](./react/class/first-state)
+- [Multieditor](./react/multieditor)
+- [useProxy](./react/simple-useproxy)
 
 ## 👾 Performance
-- [Large State](./large-state)
+- [Large State](./react/large-state)
 
 You can get an overview of all performance examples in [this](https://github.com/agile-ts/performance-compare) repo.
 
 
 ## 😎 Medium
-- [Simple Todo List](./simple-todo-list)
+- [Simple Todo List](./react/simple-todo-list)
 
 ## 🤓 Enterprise
 - coming soon

docs/examples/react/examples/SimpleUseProxy.mdx

@@ -0,0 +1,11 @@
+---
+id: simple-useproxy
+title: Simple useProxy
+sidebar_label: Simple useProxy
+slug: /examples/react/simple-useproxy
+---
+
+import {CodeSandBoxEmbed} from "../../../../src/components/docs/CodeSandBoxEmbed";
+
+<CodeSandBoxEmbed uri={'agilets-useproxy-jw5x0'} />
+

docs/packages/react/features/Hooks.md

@@ -7,7 +7,7 @@ slug: /react/hooks
 
 :::warning
 
-Be aware that [React Hooks](https://reactjs.org/docs/hooks-intro.html) are only supported in **Functional React Components**!
+Keep in mind that [React Hooks](https://reactjs.org/docs/hooks-intro.html) are only supported in **Functional React Components**!
 
 :::
 
@@ -170,11 +170,10 @@ The `useAgile()` Hook is almost 100% typesafe.
 
 ### 📭 Props
 
-| Prop              | Type                                                                       | Description                                                                                                  | Required    | 
-| ----------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------|
-| `deps`            | Array<SubscribableAgileInstancesType\> \| SubscribableAgileInstancesType   | Agile Sub Instances that are bound to the Component in which the useAgile Hook is located                    | Yes         | 
-| `key`             | string \| number                                                           | Key/Name of SubscriptionContainer that is created. Mainly thought for Debugging                              | No          | 
-| `agileInstance`   | Agile                                                                      | To which Agile Instance the State belongs. Automatically detected if only one Agile Instance exists.         | No          |
+| Prop              | Type                                                                         | Description                                                                                                  | Required    | 
+| ----------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------|
+| `deps`            | Array<SubscribableAgileInstancesType\> \| SubscribableAgileInstancesType     | Agile Sub Instances that are bound to the Component in which the useAgile Hook is located                    | Yes         | 
+| `config`          | [AgileHookConfigInterface](../../../Interfaces.md#agilehookconfiginterface)  | Configuration                                                                                                | No          |
 
 #### SubscribableAgileInstancesType
 ```ts
@@ -214,6 +213,71 @@ console.log(myState2); // Returns 'frank'
 
 
 
+## `useProxy()`
+
+Basically `useProxy()` does the same as [`useAgile()`](#useagile)
+but it differs in one key area.
+It wraps a proxy around its return value, 
+which has no limitation for the end user, but it allows AgileTs to track the used properties.
+With this information it is possible to only rerender the Component,
+when a used property mutates. In `useAgile()` it rerenders the Component
+whenever anything in the State changes, no matter it is displayed or not.
+Be aware that this is only useful if you pass an array or object State
+because it wouldn't make sense to track any primitive value.
+
+### 🔴 Example
+
+```tsx live
+const App = new Agile();
+const MY_STATE = App.createState({name: 'jeff', location: 'Germany', age: 19}, {key: 'myState'});
+
+let rerenderCount = 0;
+
+const RandomComponent = () => {
+  const myState = useProxy(MY_STATE);
+
+  rerenderCount++;
+
+  return (
+          <div>
+            <p>Name: {myState.name}</p>
+            <p>Rerender: {rerenderCount}</p>
+            <p>State Value: {JSON.stringify(MY_STATE.value)}</p>
+            <button
+                    onClick={() => {
+                      MY_STATE.patch({name: generateId()})
+                    }}
+            >
+              Update Name
+            </button>
+            <button
+                    onClick={() => {
+                      MY_STATE.patch({location: generateId()})
+                    }}
+            >
+              Update Location
+            </button>
+          </div>
+  );
+}
+
+render(<RandomComponent/>);
+```
+
+### 🟦 Typescript
+
+The `useProxy()` Hook is almost 100% typesafe.
+
+
+
+<br />
+
+---
+
+<br />
+
+
+
 ## `useWatcher()`
 Creates a  `callback` that observes the State on changes.
 The provided `callback` function will be fired on every State `value` mutation.
@@ -270,4 +334,4 @@ The `useWatcher()` Hook is almost 100% typesafe.
 
 ```ts
 void
-```
+```

docusaurus.config.js

@@ -1,5 +1,5 @@
 const { Agile, generateId } = require('@agile-ts/core');
-const { AgileHOC, useAgile, useWatcher } = require('@agile-ts/react');
+const { AgileHOC, useAgile, useWatcher, useProxy } = require('@agile-ts/react');
 const { Event, useEvent } = require('@agile-ts/event');
 const { toast } = require('react-toastify');
 
@@ -39,6 +39,7 @@ const customFields = {
   liveCodeScope: {
     Agile,
     useAgile,
+    useProxy,
     useEvent,
     useWatcher,
     AgileHOC,
@@ -156,6 +157,14 @@ const config = {
               label: 'Get Started',
               to: 'docs/introduction',
             },
+            {
+              label: 'Examples',
+              to: 'docs/examples',
+            },
+            {
+              label: 'React',
+              to: 'docs/quick-start/react',
+            },
           ],
         },
         {