React Hook recipe from https://usehooks.com

use-memo-compare.jsx

import React, { useState, useEffect, useRef } from 'react';

// Usage
function MyComponent({ obj }) {
  const [state, setState] = useState();
  
  // Use the previous obj value if the "id" property hasn't changed
  const objFinal = useMemoCompare(obj, (prev, next) => {
    return prev && prev.id === next.id;
  });
  
  // Here we want to fire off an effect if objFinal changes.
  // If we had used obj directly without the above hook and obj was technically a
  // new object on every render then the effect would fire on every render.
  // Worse yet, if our effect triggered a state change it could cause an endless loop
  // where effect runs -> state change causes rerender -> effect runs -> etc ...
  useEffect(() => {
    // Call a method on the object and set results to state
    return objFinal.someMethod().then((value) => setState(value));
  }, [objFinal]);
  
  // So why not pass [obj.id] as the dependency array instead?
  useEffect(() => {
    // Then eslint-plugin-hooks would rightfully complain that obj is not in the
    // dependency array and we'd have to use eslint-disable-next-line to work around that. 
    // It's much cleaner to just get the old object reference with our custom hook.
    return obj.someMethod().then((value) => setState(value));
  }, [obj.id]);
    
  return <div> ... </div>;
}
  
// Hook
function useMemoCompare(next, compare) {
  // Ref for storing previous value
  const previousRef = useRef();
  const previous = previousRef.current;
  
  // Pass previous and next value to compare function
  // to determine whether to consider them equal.
  const isEqual = compare(previous, next);

  // If not equal update previousRef to next value.
  // We only update if not equal so that this hook continues to return
  // the same old value if compare keeps returning true.
  useEffect(() => {
    if (!isEqual) {
      previousRef.current = next;
    }
  });
  
  // Finally, if equal then return the previous value
  return isEqual ? previous : next;
}

This is my suggestion.
Current problem is

• lack of type.
• current useEffect doesn't have dependencies.
• previous can be undefined. compare function should not get undefined as its params. You have to handle it.
• useEffect should not be used here.

import { useRef } from "react";
export function useMemoCompare(state: T, compare: (previous: T, current: T) => boolean) {
const previousRef = useRef();
const previous = previousRef.current;
if (previous === undefined) {
return state
}
const isEqual = compare(previous, state);
if (!isEqual) {
previousRef.current = state;
}
return isEqual ? previous : state;
}

Edited: Don't use above code. I updated my code. The previous one causes an infinite loop.

import { useRef } from "react";

export function useMemoCompare<T>(state: T, compare: (previous: T, current: T) => boolean) {
  const previousRef = useRef<T>();
  const previous = previousRef.current;
  const isEqual = (previous === undefined) ? false : compare(previous, state);
  if (!isEqual) {
    previousRef.current = state;
  }
  return isEqual ? previous : state;
}

@asterisk37n You need to wrap updates to refs in useEffect because it is a side effect. React can discard renders before running effects.

Also... your code is super broken. previous will always be undefined in that block because ref.current is never updated. If you want to not call compare on the first render either store that inside the ref or use some sort of sentinel value instead.

const FirstRender = Symbol();

export function useMemoCompare<T>(state: T, compare: (previous: T, current: T) => boolean) {
  const previousRef = useRef<T | typeof FirstRender>(FirstRender);
  const previous = previousRef.current;
  const isEqual = previous !== FirstRender && compare(previous, state);
  useEffect(() => {
    if (!isEqual) {
      previousRef.current = state;
    }
  }, [state]);
  return isEqual ? previous : state;
}

@heyimalex Thanks for quick check. Yeah, as you said, my post causes an infinite loop and was about to destroy my computer. I updated my code that seemingly works fine.
Could you explain why you would useEffect in your code at your convenience?

I also have a question about how to "get data and edit, update into database".