2.0.2. lazy callback

Author: rwieruch

README.md

@@ -10,6 +10,8 @@ Custom hook to include a callback function for useState which was previously ava
 
 ## Usage
 
+**useStateWithCallback:**
+
 ```
 import React from 'react';
 
@@ -31,27 +33,64 @@ const App = () => {
   //   }
   // });
 
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+
   return (
     <div>
       {count}
 
-      <button type="button" onClick={() => setCount(count + 1)}>
+      <button type="button" onClick={handleClick}>
         Increase
       </button>
     </div>
   );
 };
 ```
 
+**useStateWithCallbackLazy:**
+
+```
+import React from 'react';
+import { useStateWithCallbackLazy } from 'use-state-with-callback';
+
+const App = () => {
+  const [count, setCount] = useStateWithCallbackLazy(0);
+
+  const handleClick = () => {
+    setCount(count + 1, (currentCount) => {
+      if (currentCount > 1) {
+        console.log('Threshold of over 1 reached.');
+      } else {
+        console.log('No threshold reached.');
+      }
+    });
+  };
+
+  return (
+    <div>
+      <p>{count}</p>
+
+      <button type="button" onClick={handleClick}>
+        Increase
+      </button>
+    </div>
+  );
+};
+
+export default App;
+```
+
 ## Contribute
 
-* `git clone git@github.com:the-road-to-learn-react/use-state-with-callback.git`
-* `cd use-state-with-callback`
-* `npm install`
-* `npm run test`
+- `git clone git@github.com:the-road-to-learn-react/use-state-with-callback.git`
+- `cd use-state-with-callback`
+- `npm install`
+- `npm run test`
 
 ### More
 
-* [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
-* [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
-* [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)
+- [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
+- [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
+- [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "use-state-with-callback",
-  "version": "1.0.18",
+  "version": "2.0.2",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package.json

@@ -1,4 +1,4 @@
-import { useState, useEffect, useLayoutEffect } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 
 const useStateWithCallback = (initialState, callback) => {
   const [state, setState] = useState(initialState);
@@ -16,6 +16,28 @@ const useStateWithCallbackInstant = (initialState, callback) => {
   return [state, setState];
 };
 
-export { useStateWithCallbackInstant };
+const useStateWithCallbackLazy = initialValue => {
+  const callbackRef = useRef(null);
+
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    if (callbackRef.current) {
+      callbackRef.current(value);
+
+      callbackRef.current = null;
+    }
+  }, [value]);
+
+  const setValueWithCallback = (newValue, callback) => {
+    callbackRef.current = callback;
+
+    return setValue(newValue);
+  };
+
+  return [value, setValueWithCallback];
+};
+
+export { useStateWithCallbackInstant, useStateWithCallbackLazy };
 
 export default useStateWithCallback;