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 https://github.com/mrousavy/react-native-mmkv/blob/f564552f262c0a446520fd03f83cd8656acd1917/src/hooks.ts#L68

[mrousavy]

Aha, it works for everything but not useMMKVObject yet. got it. https://github.com/mrousavy/react-native-mmkv/blob/f564552f262c0a446520fd03f83cd8656acd1917/src/hooks.ts#L178-L202

[fahad86]

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

https://github.com/mrousavy/react-native-mmkv/blob/f564552f262c0a446520fd03f83cd8656acd1917/src/hooks.ts#L178-L202

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: https://github.com/mrousavy/react-native-mmkv/pull/623 please test to ensure that you don't see any issues in your side

[mrousavy]

Hey - I think this has been fixed in V3 beta.