use-synchronized-state 1.0.15 → 1.0.17

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 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
 

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
@@ -149,9 +149,10 @@ 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 jsx
 function ChildComponent({ parentState }: { parentState: number }) {
@@ -167,9 +168,8 @@ 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,
-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 'use-synchronized-state' hook solves the synchronization problem in an easier and more consistent manner.
+Also, the api is easy to use and it works for any reactive value.
 
 
 ```typescript jsx

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);return a!==e&&(t(e),r[1](e)),r}exports.useSyncState=useSyncState;

package/dist/index.d.ts

@@ -1,10 +1,10 @@
-import { Dispatch, SetStateAction } from 'react';
+/// <reference types="react" />
 /**
  * This hook creates a synchronized state while avoiding the cascading update issue.
  * In our case, synchronized means that when there is a change in propsState,
  * 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>>];
+export declare function useSyncState<T>(propsState: T): [T, import("react").Dispatch<import("react").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);return a!==t&&(e(t),r[1](t)),r}export{useSyncState};

package/package.json

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