State Setters from useMMKV hooks shoud support retrieval of previousState

[fahad86]

This is to help with having a clean code with minimal dependancies (and probably fewer re-renders)

For e.g.

const [user, setUser] = useMMKVObject("user");

let newName = "BLAHBLAH";

setUser((prevState) => {
  return {
    ...prevState,
    name: newName
  };
});

[mrousavy]

Good point, but this will be an extra read. What if the user doesn't need the previou state? then it will be an unnecessary DB Read

[fahad86]

Is there a way to maybe overload the method (https://www.geeksforgeeks.org/function-overloading-in-javascript/) in such a way that if an arg (prevState) is provided then we do the extra read and perform extra processing and if not then we just maintain the original behaviour?

[mrousavy]

Wait hold on - isn't that already possible?

You can do

const [username, setUsername] = useMMKVString("username")

setUser((prevState) => {
  if (prevState === 'marc')
    return 'fahad86'
  else
    return 'marc'
});

Here's the code for that

react-native-mmkv/src/hooks.ts

Line 68 in f564552

const newValue = typeof v === 'function' ? v(valueRef.current) : v;

[mrousavy]

Aha, it works for everything but not useMMKVObject yet. got it.

react-native-mmkv/src/hooks.ts

Lines 178 to 202 in f564552

	export function useMMKVObject<T>(
	key: string,
	instance?: MMKV
	): [value: T | undefined, setValue: (value: T | undefined) => void] {
	const [string, setString] = useMMKVString(key, instance);
	const value = useMemo(() => {
	if (string == null) return undefined;
	return JSON.parse(string) as T;
	}, [string]);
	const setValue = useCallback(
	(v: T | undefined) => {
	if (v == null) {
	// Clear the Value
	setString(undefined);
	} else {
	// Store the Object as a serialized Value
	setString(JSON.stringify(v));
	}
	},
	[setString]
	);
	return [value, setValue];
	}

[fahad86]

Aha, it works for everything but not useMMKVObject yet. got it.

react-native-mmkv/src/hooks.ts

Lines 178 to 202 in f564552

	export function useMMKVObject<T>(
	key: string,
	instance?: MMKV
	): [value: T | undefined, setValue: (value: T | undefined) => void] {
	const [string, setString] = useMMKVString(key, instance);
	const value = useMemo(() => {
	if (string == null) return undefined;
	return JSON.parse(string) as T;
	}, [string]);
	const setValue = useCallback(
	(v: T | undefined) => {
	if (v == null) {
	// Clear the Value
	setString(undefined);
	} else {
	// Store the Object as a serialized Value
	setString(JSON.stringify(v));
	}
	},
	[setString]
	);
	return [value, setValue];
	}

I assumed it didn't work for the other setters as well😅.. so what's the plan now?

[bviebahn]

Is there any reason this is not implemented yet? I currently just use my own hook which is pretty straightforward:

function useMMKVObject<T>(key: string) {
    const [json, setJson] = useMMKVString(key);

    const value = React.useMemo<T | undefined>(
        () => (json ? JSON.parse(json) : undefined),
        [json],
    );

    const setValue = React.useCallback(
        (v: (T | undefined) | ((prev: T | undefined) => T | undefined)) => {
            if (v instanceof Function) {
                setJson((currentJson) => {
                    const newValue = v(
                        currentJson ? JSON.parse(currentJson) : undefined,
                    );
                    return JSON.stringify(newValue);
                });
            } else {
                setJson(v ? JSON.stringify(v) : undefined);
            }
        },
        [setJson],
    );

    return [value, setValue];
}

[fahad86]

@mrousavy the above solution by @bviebahn looks good right? There is also a related PR: https://github.com/mrousavy/react-native-mmkv/pull/254/files

[mrousavy]

Hey - that PR is outdated, can someone create a new PR with those changes? Then I think we can merge it, however: this is unsafe as there might've been outside modificiations to that data type (e.g. from a notification extension, data loss, or whatever) and the resulting type might not satisfy the type T anymore - so use it at your discretion.

[fahad86]

understood. PR created: #623 please test to ensure that you don't see any issues in your side