use-synchronized-state 1.0.14 → 1.0.16

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 1.0.16 (Jan 23, 2026)
+- Make the hook compatible with the Fiber algorithm
+
+## 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

package/README.md

@@ -1,4 +1,4 @@
-# A React hook that creates a synchronized state with a reactive value in react (fixing the Cascading updates issue)
+# A React hook that creates a synchronized state with a reactive value (fixing the Cascading updates issue)
 
 ## Highlights
 - Offers a hook called useSyncState
@@ -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);
 
@@ -108,11 +149,12 @@ This is the cascading updates problem in all its glory, instead of having one re
 
 What react docs tell us to do in this case can be found here
 https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes.
-I have changed the above example to match it. It still rerenders the ChildComponent twice, which still causes a
+The above example was changed to match the docs. It still rerenders the ChildComponent twice, which still causes a smaller
 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).
+(if syncState was a prop, it wouldn't work). Also, the parentState and syncState will be synchronized only starting with
+the second render.
 
-```typescript
+```typescript jsx
 function ChildComponent({ parentState }: { parentState: number }) {
   const [syncState, setSyncState] = useState(parentState);
 
@@ -126,12 +168,13 @@ function ChildComponent({ parentState }: { parentState: number }) {
 }
 ```
 
-The 'use-synchronized-state' hook fixes all these issues by synchronizing the values in the same and only render. In the bellow example,
+The 'use-synchronized-state' hook fixes some of these issues by synchronizing the values in an easier and more consistent manner. In the bellow example,
 if the reactive value changes (for example setParentState(1) is called), both parentState and syncState will have
-the same value from the first render (after the setParentState) and there will be no additional render (only the needed one).
+the same value from the first render (after the setParentState). There will still be two renders, but the values will be in sync from the first one.
+Also, the api is easy to use and it works for any reactive value.
 
 
-```typescript
+```typescript jsx
 import { useSyncState } from 'use-synchronized-state';
 
 function ChildComponent({ parentState }: { parentState: number }) {

package/dist/index.cjs

@@ -1 +1 @@
-var react=require("react");function useSyncState(e){var t=react.useState(!0)[1],c=react.useRef(e),r=react.useRef(e),r=(r.current!==e&&(r.current=e,c.current=e),react.useCallback(function(e){var r=c.current;c.current=e instanceof Function?e(c.current):e,t(function(e){return r!==c.current?!e:e})},[c]));return[c.current,r]}exports.useSyncState=useSyncState;
+var react=require("react");function useSyncState(e){var t=react.useState(e),a=t[0],t=t[1],r=react.useState(e),c=r[0],r=r[1];return a!==e&&(t(c=e),r(e)),[c,r]}exports.useSyncState=useSyncState;

package/dist/index.d.ts

@@ -5,6 +5,6 @@ import { Dispatch, SetStateAction } from 'react';
  * the returned state changes to the same value,
  * but it can also change independently when the returned setState is called.
  * @param propsState - a reactive value (e.g. state, props) with which our returned state will synchronize
- * Returns the exact same output as useState: [state, setState], where state is the synchronized state with the propsState
+ * @return the exact same output as useState: [state, setState], where state is the synchronized state with the propsState
  */
 export declare function useSyncState<T>(propsState: T): [T, Dispatch<SetStateAction<T>>];

package/dist/index.mjs

@@ -1 +1 @@
-import{useState,useRef,useCallback}from"react";function useSyncState(e){var t=useState(!0)[1],u=useRef(e),r=useRef(e),r=(r.current!==e&&(r.current=e,u.current=e),useCallback(function(e){var r=u.current;u.current=e instanceof Function?e(u.current):e,t(function(e){return r!==u.current?!e:e})},[u]));return[u.current,r]}export{useSyncState};
+import{useState}from"react";function useSyncState(t){var e=useState(t),a=e[0],e=e[1],r=useState(t),u=r[0],r=r[1];return a!==t&&(e(u=t),r(t)),[u,r]}export{useSyncState};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "use-synchronized-state",
-  "version": "1.0.14",
-  "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",
+  "version": "1.0.16",
+  "description": "A React hook that creates a synchronized state with a reactive value (fixing the Cascading updates issue)",
+  "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",