i17: Stabilize Onsave (#21)

* store callback in a ref

* update example with redeclared callback

* update documentation

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.1] - 10-23-22
+
+## Added
+
+- Prettier code formatting
+
+## Changed
+
+- useAutosave will not fire the `onSave` callback if the definition of `onSave` changes
+
 ## [0.4.0] - 5-15-22
 
 ## Added

README.md

@@ -12,7 +12,7 @@ Typically, this is used to make API calls when a user stops typing for a second
 
 ## Examples
 
-```jsx
+```tsx
 import React from 'react';
 import axios from 'axios';
 
@@ -51,30 +51,6 @@ const EditBlogForm = () => {
 };
 ```
 
-Notice that the callback function **needs to be memoized**. If you are declaring the function within your component, wrap it in a use callback:
-
-```tsx
-const EditBlogFormWithHook = () => {
-  const [blogText, setBlogText] = React.useState('hello world');
-
-  // https://reactjs.org/docs/hooks-reference.html#usecallback
-  const updateBlog = React.useCallback((newText: string) => {
-    axios.post('myapi/blog/123', { text: newText }).catch(console.error);
-  }, []);
-
-  useAutosave({ data: blogText, onSave: updateBlog });
-  return (
-    <div>
-      <input
-        type="text"
-        value={blogText}
-        onChange={(e) => setBlogText(e.target.value)}
-      />
-    </div>
-  );
-};
-```
-
 ## Installation
 
 ```sh

example/App.tsx

@@ -7,6 +7,8 @@ function App() {
   const [text, setText] = useState('hello world');
   const [value, setValue] = useState(text);
 
+  const unoptimizedSaveFunction = (data: string) => setValue(data);
+
   return (
     <div
       style={{
@@ -21,7 +23,11 @@ function App() {
       }}
     >
       {showForm ? (
-        <Form setText={setText} text={text} setValue={setValue} />
+        <Form
+          setText={setText}
+          text={text}
+          setValue={unoptimizedSaveFunction}
+        />
       ) : null}
       <p>
         Save function called with:{' '}
@@ -39,7 +45,7 @@ const Form = ({
 }: {
   text: string;
   setText: Dispatch<SetStateAction<string>>;
-  setValue: Dispatch<SetStateAction<string>>;
+  setValue: (data: string) => void;
 }) => {
   useAutosave({ data: text, onSave: setValue });
   return (

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A component or hook to auto save controlled form values as they are updated",
   "repository": "https://github.com/jollyjerr/react-autosave",
   "author": "jollyjerr <[email protected]>",

src/useAutosave.tsx

@@ -10,27 +10,33 @@ function useAutosave<TData, TReturn>({
 }: CommonProps<TData, TReturn>) {
   const valueOnCleanup = useRef(data);
   const initialRender = useRef(true);
+  const handleSave = useRef(onSave);
+
   const debouncedValueToSave = useDebounce(data, interval);
 
   useEffect(() => {
     if (initialRender.current) {
       initialRender.current = false;
     } else {
-      onSave(debouncedValueToSave);
+      handleSave.current(debouncedValueToSave);
     }
-  }, [debouncedValueToSave, onSave]);
+  }, [debouncedValueToSave]);
 
   useEffect(() => {
     valueOnCleanup.current = data;
   }, [data]);
 
+  useEffect(() => {
+    handleSave.current = onSave;
+  }, [onSave]);
+
   useEffect(
     () => () => {
       if (saveOnUnmount) {
-        onSave(valueOnCleanup.current);
+        handleSave.current(valueOnCleanup.current);
       }
     },
-    [onSave, saveOnUnmount],
+    [saveOnUnmount],
   );
 }