use-synchronized-state 1.0.15 → 1.0.16

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,10 @@ 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 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),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,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.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-synchronized-state/issues"