react-deepwatch 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mechanics.md +1 -1
- package/package.json +1 -1
- package/readme.md +7 -6
package/mechanics.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Deeper
|
|
1
|
+
# Deeper explanation of the mechanics
|
|
2
2
|
## Re-rendering
|
|
3
3
|
- A watchedComponents is re-rendered **by React from the outside**, only when shallow properties change. It uses React's [memo](https://react.dev/reference/react/memo) therefore. See the `WatchedComponentOptions#memo` flag.
|
|
4
4
|
- A watchedComponents re-renders it's self when a property, that is actually "read" inside the render function (=component function), later changes. This is from these (root) sources:
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -28,7 +28,7 @@ const MyComponent = watchedComponent(props => {
|
|
|
28
28
|
|
|
29
29
|
<MyComponent/> // Use MyComponent
|
|
30
30
|
````
|
|
31
|
-
[](https://stackblitz.com/fork/github/bogeeee/react-deepwatch/tree/1.x/examples/no-more-setstate?title=react-deepwatch%20example&file=index.jsx)
|
|
32
32
|
|
|
33
33
|
## and less... loading code
|
|
34
34
|
Now that we already have the ability to deeply record our reads, let's see if there's also a way to **cut away the boilerplate code for `useEffect`**.
|
|
@@ -45,6 +45,8 @@ const MyComponent = watchedComponent(props => {
|
|
|
45
45
|
|
|
46
46
|
<MyComponent/> // Use MyComponent
|
|
47
47
|
````
|
|
48
|
+
[](https://stackblitz.com/fork/github/bogeeee/react-deepwatch/tree/1.x/examples/less-loading-code?title=react-deepwatch%20example&file=index.jsx)
|
|
49
|
+
|
|
48
50
|
**`load(...)` re-executes `myFetchFromServer`, when a dependent value changes**. That means, it records all reads from previous code in your component function plus the reads immediately inside the `load(...)` call. _Here: props.myProperty._
|
|
49
51
|
The returned Promise will be await'ed and the component will be put into [suspense](https://react.dev/reference/react/Suspense) that long.
|
|
50
52
|
👍 load(...) can be inside a conditional block or a loop. Then it has already recorded the condition + everything else that leads to the computation of load(...)'s point in time and state 😎._
|
|
@@ -79,11 +81,6 @@ To reduce the number of expensive `myFetchFromServer` calls, try the following:
|
|
|
79
81
|
- [startTransition](https://react.dev/reference/react/startTransition) is not supported (has no effect).
|
|
80
82
|
- As said: Keep in mind that `load(...)` calls `preserve` on its result. It also invalidates (destroys) the "unused" objects. _When they're not really unused any you are trying to access them, You'll get the proper error message how to disable it_.
|
|
81
83
|
|
|
82
|
-
# [Deeper explaining the mechanics](mechanics.md)
|
|
83
|
-
|
|
84
|
-
# Playground [](https://stackblitz.com/fork/github/bogeeee/react-deepwatch/tree/1.x/example?title=react-deepwatch%20example&file=index.ts)
|
|
85
|
-
TODO
|
|
86
|
-
|
|
87
84
|
# And less... handing onChange listeners to child components
|
|
88
85
|
Since we have proxy-facades, we can easily hook on, whenever some deep data changes and don't need to manage that with callback- passing to child-child components.
|
|
89
86
|
Let's say, we have a form and a child component, that modifies it. We are interested in changes, so we can send the form content to the server.
|
|
@@ -106,6 +103,8 @@ const MyParentComponent = watchedComponent(props => {
|
|
|
106
103
|
</form>
|
|
107
104
|
});
|
|
108
105
|
````
|
|
106
|
+
[](https://stackblitz.com/fork/github/bogeeee/react-deepwatch/tree/1.x/examples/onchange-handlers?title=react-deepwatch%20example&file=index.jsx)
|
|
107
|
+
|
|
109
108
|
_This example will trigger both onChange handlers._
|
|
110
109
|
|
|
111
110
|
_Note, that `watched(myState.form) !== myState.form`. It created a new proxy object in a new proxy-facade layer here, just for the purpose of deep-watching everything under it. Sometimes you may want to take advantage of it, so that modifications in the originaly layer (in MyParentComponent) won't fire the onChange event / call the postFormToTheSerer function. I.e. for updates that came from the server_
|
|
@@ -119,6 +118,8 @@ You can also use `watched` similarly to `useWatchedState` to watch any global o
|
|
|
119
118
|
### poll
|
|
120
119
|
Besides `load`, there's also the `poll` function, which works similar, but re-loads in regular intervals. _See jsDoc_
|
|
121
120
|
|
|
121
|
+
# [Deeper explanation of the mechanics](https://github.com/bogeeee/react-deepwatch/blob/main/react-deepwatch/mechanics.md)
|
|
122
|
+
|
|
122
123
|
### Simplify the server side as well
|
|
123
124
|
If you like, how this library simplifies things for you and want to write the backend (http) endpoints behind your load(...) statements simply as typescript methods, have a look at my flagship project [Restfuncs](https://github.com/bogeeee/restfuncs).
|
|
124
125
|
Example:
|