[Bug] Using useStorage hook to setValue and get the value using getMap returning null

[flixyudh]

Describe the bug

I've some code at Foo.js:

const [cart, setCart] = useLocalStorage('CART')

React.useEffect(()=>{
    console.log('[Tagihan] cart useEffect', cart)
    AxiosHTTP.get('URL')
    .then(res=>{
      setCart(res.data.data) // type data is object
    })
  },[])

//use `cart` at render

and in Bar.js i don't want to use useLocalStorage because i just need to get list of cart so am only use HelperMMKVStorage.getMap('CART') but it returning null,

does it is an actual behaviour or am i missing something?

and why MMKV hook returning null at the first time even the CART key have a value? also re-rendering 4x?

Expected behavior using Hooks or get should return same value as long as the Key is match

Platform Information:

• OS: Both
• React Native Version : 0.63.4
• Library Version : 0.5.8

Additional context Add any other context about the problem here.

[ammarahm-ed]

To fix the rerendering and null at start issue, update to v0.5.9. Your other problem with value being null when using getMap, I investigated and for me everything works as expected even after killing/restarting the app.

const storage = new MMKVStorage.Loader().withEncryption().initialize();
const useStorage = create(storage); // Since v0.5.9 we use create

const Foo = () => {
  const [myObject, setMyObject] = useStorage('myobject');

useEffect(()=>{
    setMyObject({hello: 'world'});
  },[])

}
// and later somewhere, the instance should be the same which was used in useMMKV hook.

storage.getMap("myobject") // returns {"hello": "world"}

Also make sure that while the type is object, if it is an array [] then you should use getArray instead of getMap

[flixyudh]

I just updated to v0.5.9 but i get an error at the first time

[Info] 05-31 11:29:51.127  2237  2300 E ReactNativeJS: TypeError: undefined is not a function, js engine: hermes

[Info] 05-31 11:29:51.232  2237  2300 E ReactNativeJS: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication), js engine: hermes

[Info] 05-31 11:29:51.235  2237  2300 E ReactNativeJS: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication), js engine: hermes

DBHelper.js

import MMKV, { create } from "react-native-mmkv-storage";

export const HelperMMKVStorage = new MMKV.Loader().withEncryption().initialize();
const useStorage = create(HelperMMKVStorage);

const firstInstall = "FIRST_INSTALL"
const user = "USER"
const location = "LOCATION"

export const useLocalStorage = create(HelperMMKVStorage)

is it because i'm using Hermes?

Edited:

just tried to commented create function from react-native-mmkv-storage my app runnning well

[ammarahm-ed]

@zxccvvv its because the update wasn't installed correctly. Try running npm install react-native-mmkv-storage@latest update. Also you do not need to create the same hook twice.

[flixyudh]

still got the same error with logcat:

05-31 14:11:00.218 27242 27337 I MMKV    : <MMKV_IO.cpp:81::loadFromFile> loading [default] with 34 actual size, file size 4096, InterProcess 0, meta info version:3
05-31 14:11:00.218 27242 27337 I MMKV    : <MMKV_IO.cpp:86::loadFromFile> loading [default] with crc 3308947539 sequence 1 version 3
05-31 14:11:00.218 27242 27337 I MMKV    : <MMKV_IO.cpp:130::loadFromFile> loaded [default] with 2 key-values
05-31 14:11:00.218 27242 27337 I MMKV    : <MMKV.cpp:276::clearMemoryCache> clearMemoryCache [default]
05-31 14:11:00.219 27242 27337 I MMKV    : <MMKV_IO.cpp:81::loadFromFile> loading [default] with 34 actual size, file size 4096, InterProcess 0, meta info version:3
05-31 14:11:00.219 27242 27337 I MMKV    : <MMKV_IO.cpp:86::loadFromFile> loading [default] with crc 3308947539 sequence 1 version 3
05-31 14:11:00.219 27242 27337 I MMKV    : <MMKV_IO.cpp:130::loadFromFile> loaded [default] with 2 key-values

05-31 14:11:00.262  1093 27366 E ResolverController: No valid NAT64 prefix (19051, <unspecified>/0)
05-31 14:11:00.263 27242 27337 E ReactNativeJS: TypeError: undefined is not a function, js engine: hermes

05-31 14:11:00.325 27367 27367 I subsystem_ramdump: Usage:./system/bin/subsystem_ramdump [arg1] [arg2] [arg3]

Seems like i'll go with useMMKVStorage at the moment thought