Fix useDebouncedMemo, improve RooksDemoPage, other fixes and changes

Author: k.golikov

src/hooks/debouncedMemo.ts

@@ -2,6 +2,7 @@ import { DependencyList, useEffect, useRef, useState } from 'react';
 import { debounce, isObject, throttle } from 'lodash';
 import { v4 } from 'uuid';
 import call from '../utils/call';
+import useAutoRef from './useAutoRef';
 
 interface NoResult {
     _noResult: string;
@@ -11,21 +12,22 @@ const isNoResult = <T>(value: T | NoResult, noResult: NoResult): value is NoResu
     return isObject(value) && '_noResult' in value && value._noResult === noResult._noResult;
 };
 
-type MemoFactory<P, R> = (params: P, noResult: NoResult) => R | NoResult;
+type MemoFactory<R> = (noResult: NoResult) => R | NoResult;
 
 const createDebouncedMemoHook =
     (debounceFn: typeof debounce) =>
-    <P, R>(params: P, factory: MemoFactory<P, R>, deps: DependencyList | undefined, wait?: number) => {
+    <R>(factory: MemoFactory<R>, deps: DependencyList | undefined, wait?: number) => {
         const [value, setValue] = useState<R>();
+        const factoryRef = useAutoRef(factory);
 
         const debounceFunction = useRef(
             call(() => {
                 const actualNoResult: NoResult = {
                     _noResult: v4()
                 };
 
-                return debounceFn((params: P) => {
-                    const value = factory(params, actualNoResult);
+                return debounceFn(() => {
+                    const value = factoryRef.current(actualNoResult);
 
                     if (!isNoResult(value, actualNoResult)) {
                         setValue(value);
@@ -35,7 +37,7 @@ const createDebouncedMemoHook =
         ).current;
 
         useEffect(() => {
-            debounceFunction(params);
+            debounceFunction();
         }, deps);
 
         return value;

src/hooks/useAutoRef.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+const useAutoRef = <T>(value: T): Readonly<MutableRefObject<T>> => {
+    const valueRef = useRef<T>(value);
+
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+
+    return valueRef;
+};
+
+export default useAutoRef;

src/pages/bgGeneratorPage/BgGeneratorPage.tsx

@@ -36,8 +36,7 @@ const BgGeneratorPage = () => {
     const [size, setSize] = useState<Size>(getScaledScreenSize());
     const [color, setColor] = useState<string>('#42a5f5');
     const imgSource = useDebouncedMemo(
-        { size, color, imgCanvasRef },
-        ({ size, color, imgCanvasRef }) => {
+        () => {
             if (!imgCanvasRef.current) {
                 return;
             }

src/pages/htmlEditorPage/HtmlEditorPage.tsx

@@ -118,8 +118,7 @@ const HtmlEditorPage: FunctionComponent = () => {
     const handleViewModeChange = useChangeValueStateHandler(setViewMode);
 
     const resultSource = useDebouncedMemo(
-        { sources },
-        ({ sources }) => {
+        () => {
             return `
 <style>
 ${sources.css}

src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx

@@ -84,8 +84,7 @@ const JsonToTypeScriptPage = () => {
     }, [selectableConversionOptions]);
 
     const typeScript = useDebouncedMemo(
-        { json, conversionOptions },
-        ({ json, conversionOptions }, noResult) => {
+        (noResult) => {
             if (!json?.trim()) {
                 setError(undefined);
                 return '';

src/pages/rooksDemoPage/RooksDemoPage.tsx

@@ -61,6 +61,10 @@ const RooksDemoPage: FunctionComponent = () => {
         getLocalStorageKey('rooks-demo', 'localStorageState'),
         initialStorageState
     );
+    const [localStorageState2, setLocalStorageState2] = useLocalstorageState<StorageState>(
+        getLocalStorageKey('rooks-demo', 'localStorageState'),
+        initialStorageState
+    );
     //! useSessionstorageState
     const [sessionStorageState, setSessionStorageState] = useSessionstorageState<StorageState>(
         getLocalStorageKey('rooks-demo', 'sessionStorageState'),
@@ -93,6 +97,13 @@ const RooksDemoPage: FunctionComponent = () => {
         });
     }, []);
 
+    const handleLocalStorage2TextChange = useCallback<EventHandler<ChangeEvent<HTMLTextAreaElement>>>((event) => {
+        setLocalStorageState2({
+            ...localStorageState,
+            text: event.target.value
+        });
+    }, []);
+
     const handleSessionStorageTextChange = useCallback<EventHandler<ChangeEvent<HTMLTextAreaElement>>>((event) => {
         setSessionStorageState({
             ...sessionStorageState,
@@ -143,7 +154,10 @@ const RooksDemoPage: FunctionComponent = () => {
                 </Col>
                 <Col>
                     <RooksHookHeading hooks={['useLocalstorageState']} />
-                    <TextArea value={localStorageState.text} onChange={handleLocalStorageTextChange} />
+                    <Flex column gap={6} align="stretch">
+                        <TextArea value={localStorageState.text} onChange={handleLocalStorageTextChange} />
+                        <TextArea value={localStorageState2.text} onChange={handleLocalStorage2TextChange} />
+                    </Flex>
                 </Col>
                 <Col>
                     <RooksHookHeading hooks={['useSessionstorageState']} />

src/pages/rooksDemoPage/components/RooksHookHeading.tsx

@@ -13,8 +13,10 @@ const RooksHookHeading: FunctionComponent<Props> = ({ hooks }) => {
     return (
         <h3>
             <Flex row gap={8}>
-                {hooks.map((hook) => (
-                    <ExternalLink href={getLink(hook)}>{hook}</ExternalLink>
+                {hooks.map((hook, index) => (
+                    <ExternalLink key={index} href={getLink(hook)}>
+                        {hook}
+                    </ExternalLink>
                 ))}
             </Flex>
         </h3>