use-synchronized-state 1.0.13 → 1.0.15

package/CHANGELOG.md

@@ -0,0 +1,45 @@
+## 1.0.15 (Jan 8, 2026)
+- Correct links in package.json
+
+## 1.0.14 (Jan 8, 2026)
+- Add CHANGELOG.md to the list of exported files
+
+## 1.0.13 (Jan 8, 2026)
+- Correct docs
+- Add CHANGELOG.md
+
+## 1.0.12 (Jan 8, 2026)
+- Cleanup the "files" field in package.json
+
+## 1.0.11 (Jan 8, 2026)
+- Mimic the useState hook's behavior when setting the same state (add bailing out)
+
+## 1.0.10 (Jan 8, 2026)
+- Prevent re-renders when setting the same state
+
+## 1.0.8 (Jan 8, 2026)
+- Add an extra keyword
+
+## 1.0.7 (Jan 8, 2026)
+- Improve the packaging
+
+## 1.0.6 (Jan 8, 2026)
+- Cleanup docs
+
+## 1.0.5 (Jan 8, 2026)
+- Fix a bug with the rendering
+
+## 1.0.4 (Jan 7, 2026)
+- Fix docs
+
+## 1.0.3 (Jan 7, 2026)
+- Fix docs
+
+## 1.0.2 (Jan 7, 2026)
+- Add keywords to package.json
+
+## 1.0.1 (Jan 7, 2026)
+- Improve docs
+
+## 1.0.0 (Jan 7, 2026)
+- First version

package/README.md

@@ -21,22 +21,63 @@ or
 
 ## Usage
 
-```typescript
+### Synchronize state with prop
+
+```typescript jsx
 import { useState } from 'react';
-import { useSyncState } from 'use-synchronized-state';
 
 function ParentComponent() {
   const [parentState, setParentState] = useState(0);
 
   return (
-    <ChildComponent parentState={parentState} />
+    <div>
+      <button onClick={() => {setParentState(prev => prev + 1);}}>
+        increment parentState
+      </button>
+      <div>parentState = {parentState}</div>
+      <ChildComponent parentState={parentState} />
+    </div>
   );
 }
 
+import { useSyncState } from 'use-synchronized-state';
+
 function ChildComponent({ parentState }: { parentState: number }) {
   // this syncState is synchronized with parentState (has the same api as useState)
   const [syncState, setSyncState] = useSyncState(parentState);
-  // ...
+  
+  return (
+    <div>
+      <button onClick={() => {setSyncState(prev => prev + 1);}}>
+        increment syncState
+      </button>
+      <div>syncState = {syncState}</div>
+    </div>
+  );
+}
+```
+
+### Synchronize state with memoized value
+
+```typescript jsx
+import { useMemo } from 'react';
+import { useSyncState } from 'use-synchronized-state';
+
+function ChildComponent({ parentState }: { parentState: number }) {
+  // compute a value based on parentState
+  const complexState = useMemo(() => parentState + 1, [parentState]);
+  
+  // this syncState is synchronized with complexState (has the same api as useState)
+  const [syncState, setSyncState] = useSyncState(complexState);
+
+  return (
+    <div>
+      <button onClick={() => {setSyncState(prev => prev + 1);}}>
+        increment syncState
+      </button>
+      <div>syncState = {syncState}</div> 
+    </div>
+  );
 }
 ```
 
@@ -49,7 +90,7 @@ the returned state changes to the same value, but it can also change independent
 
 ### Let's see a small example
 
-```typescript
+```typescript jsx
 import { useState } from 'react';
 
 function ParentComponent() {
@@ -79,7 +120,7 @@ What can we do in the following situation?
 
 The first thing that comes to mind is to do something like this:
 
-```typescript
+```typescript jsx
 function ChildComponent({ parentState }: { parentState: number }) {
   const [syncState, setSyncState] = useState(parentState);
 
@@ -112,7 +153,7 @@ I have changed the above example to match it. It still rerenders the ChildCompon
 performance penalty, is hard to reason about and works only for states defined in the same component
 (if syncState was a prop, it wouldn't work).
 
-```typescript
+```typescript jsx
 function ChildComponent({ parentState }: { parentState: number }) {
   const [syncState, setSyncState] = useState(parentState);
 
@@ -131,7 +172,7 @@ if the reactive value changes (for example setParentState(1) is called), both pa
 the same value from the first render (after the setParentState) and there will be no additional render (only the needed one).
 
 
-```typescript
+```typescript jsx
 import { useSyncState } from 'use-synchronized-state';
 
 function ChildComponent({ parentState }: { parentState: number }) {

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "use-synchronized-state",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A React hook that creates a synchronized state with a reactive value in react (fixing the Cascading updates issue)",
-  "homepage": "https://github.com/rhorge/use-safe-context#readme",
+  "homepage": "https://github.com/rhorge/use-synchronized-state#readme",
   "bugs": {
-    "url": "https://github.com/rhorge/use-safe-context/issues"
+    "url": "https://github.com/rhorge/use-synchronized-state/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/rhorge/use-safe-context.git"
+    "url": "git+https://github.com/rhorge/use-synchronized-state.git"
   },
   "license": "MIT",
   "author": "rhorge",
@@ -67,7 +67,8 @@
     "typescript": "^3.8.3"
   },
   "files": [
-    "/dist/*"
+    "/dist/*",
+    "CHANGELOG.md"
   ],
   "keywords": [
     "react",