use-synchronized-state 1.0.0 → 1.0.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/README.md +5 -5
- package/package.json +9 -2
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
## Highlights
|
|
4
4
|
- Offers a hook called useSyncState
|
|
5
5
|
- Removes the cascading update problem
|
|
6
|
-
- Same
|
|
6
|
+
- Same API as useState
|
|
7
7
|
- No extra dependencies
|
|
8
8
|
- Written in react with typescript
|
|
9
9
|
- Typescript support
|
|
@@ -22,7 +22,7 @@ or
|
|
|
22
22
|
## Usage
|
|
23
23
|
|
|
24
24
|
```typescript
|
|
25
|
-
import {
|
|
25
|
+
import { useState } from 'react';
|
|
26
26
|
import { useSyncState } from 'use-synchronized-state';
|
|
27
27
|
|
|
28
28
|
function ParentComponent() {
|
|
@@ -50,7 +50,7 @@ the returned state changes to the same value, but it can also change independent
|
|
|
50
50
|
### Let's see a small example
|
|
51
51
|
|
|
52
52
|
```typescript
|
|
53
|
-
import {
|
|
53
|
+
import { useState } from 'react';
|
|
54
54
|
|
|
55
55
|
function ParentComponent() {
|
|
56
56
|
const [parentState, setParentState] = useState(0);
|
|
@@ -69,7 +69,7 @@ function ChildComponent({ parentState }: { parentState: number }) {
|
|
|
69
69
|
In the above example, we have a simple component structure: a parent component that renders a child component
|
|
70
70
|
(passing its state and setter function).
|
|
71
71
|
|
|
72
|
-
When the child component mounts (is rendered for the first time), the unsyncState state
|
|
72
|
+
When the child component mounts (is rendered for the first time), the unsyncState state has the same
|
|
73
73
|
value as the parentState prop (or the parentState state, which is passed as a prop).
|
|
74
74
|
|
|
75
75
|
Now if the parentState changes (by calling its setParentState setter), the parentState prop will change accordingly,
|
|
@@ -94,7 +94,7 @@ This is doing its job, but we now have another problem called "cascading updates
|
|
|
94
94
|
React Performance tracks). You can read the docs at the following link
|
|
95
95
|
https://react.dev/reference/dev-tools/react-performance-tracks#cascading-updates.
|
|
96
96
|
|
|
97
|
-
To explain why this happens, we first have to know that React
|
|
97
|
+
To explain why this happens, we first have to know that React Fiber algorithm has two phases: the render phase and
|
|
98
98
|
the commit phase. All you need to know, to understand the issue, is that React will call useEffect after the entire
|
|
99
99
|
virtual dom is rendered.
|
|
100
100
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-synchronized-state",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A React hook that creates a synchronized state with a reactive value in react (fixing the Cascading updates issue)",
|
|
5
5
|
"author": "rhorge",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,6 +69,13 @@
|
|
|
69
69
|
"react",
|
|
70
70
|
"react hooks",
|
|
71
71
|
"typescript",
|
|
72
|
-
"npm"
|
|
72
|
+
"npm",
|
|
73
|
+
"state",
|
|
74
|
+
"state management",
|
|
75
|
+
"cascading updates",
|
|
76
|
+
"synchronize",
|
|
77
|
+
"synchronized",
|
|
78
|
+
"rendering",
|
|
79
|
+
"use-synchronized-state"
|
|
73
80
|
]
|
|
74
81
|
}
|