Async state hydration in React Native using ContextAPI

// in userState.js
export const INITIAL_USER_STATE = {
  user: null,
};

/**
 * @param {Object} contextInitialState
 * @param {ReactUseStateSetter} stateSetter
 * @description Expects any Context's initial state and local contextStateSetter to hydrate the async
 * state. The async state for the keys is fetched and loaded in as a object, using getAsyncStateObject,
 * and the respective context state is set. The state should meant to be sent to the context's provider
 * as prop `asyncState` which hydrates the Context.
 */
export const hydrateState = async (contextInitialState, stateSetter) => {
  try {
    // Get the async values for all of the keys from this Context's initial state
    let asyncStateObject = await getAsyncStateObject(Object.keys(contextInitialState));
    // Ensure that default state is not overwritten by null Async State values
    for (let [key, value] of Object.entries(asyncStateObject)) {
      // If async storage does not have a value for it, set it to the state's initial value.
      if (value === null) {
        asyncStateObject[key] = contextInitialState[key];
      }
    }
    stateSetter(asyncStateObject);
  } catch (error) {
    console.error(error, `Failed to hydrate state for keys ${stateKeysArray}`);
  }
};

/**
 * @param {Array[String]} asyncStorageKeys : List of keys to get from AsyncStorage
 * @returns {Object} asyncDataObject: Object representation of key value pairs from sync storage
 */
export async function getAsyncStateObject(asyncStorageKeys) {
  // Get all of the values from async storage
  try {
    const asyncKeyValuePairs = await AsyncStorage.multiGet(asyncStorageKeys);
    //  Reduce all of the pairs into a single object with keys and parsed values
    const asyncDataObject = asyncKeyValuePairs.reduce(
      (mapping, [key, value]) => ({ ...mapping, [key]: JSON.parse(value) }),
      {},
    );
    return asyncDataObject;
  } catch (error) {
    console.error(error, `Failed to build state for keys ${asyncStorageKeys}`);
    throw error;
  }
}

//... imports
// App.js

export const App = () => {
  const [isReady, setIsReady] = useState(false);
  const [navigationState, setNavigationState] = useState();
  const [userAsyncState, setUserAsyncState] = useState();
  /**
   * @description Effect that ensures Navigation and ContextAPI state is hydrated from Async Storage.
   * First, hydrates all Context state to load in application, then hydrates Navigation state.
   * See https://reactnavigation.org/docs/state-persistence/ for nav guidance.
   */
  useEffect(() => {
    const restoreState = async () => {
      try {
        // Hydrate all Context's state. See hydrateState.
        await Promise.all([
          hydrateState(INITIAL_USER_STATE, setUserAsyncState),
          // Add any other context you want to hydrate here
        ]);

        const initialUrl = await Linking.getInitialURL();
        // Only restore navigationState if there's no deep link and we're not on web
        if (Platform.OS !== 'web' && initialUrl == null) {
          // The async navigation state, as a raw string
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          // Parse the raw string into a Javascript object
          const navigationState = savedStateString
            ? JSON.parse(savedStateString)
            : undefined;
          if (navigationState !== undefined)
            setNavigationState(navigationState);
        }
      } finally {
        // Tell the app the navigation and async state is ready
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  // View that is returned when the app navigation is not ready/loading
  if (!isReady) return <Loading />;

  return (
    // Our Context with the userAsyncState we retrieve from async storage.
    <UserState asyncState={userAsyncState}>
      <NavigationContainer
        initialState={navigationState}
        onStateChange={(updatedState) =>
          AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(updatedState))
        }
      >
        <StackNavigator><StackNavigator />
      </NavigationContainer>
    </UserState>
  );
};

import { useEffect } from 'react';
// Your dispatcher types
import { LOADING, SET_STATE } from './types';
/**
 *
 * @param {Object} asyncState
 * @param {React.Dispatch} dispatch: Dispatcher resulting from use of `useReducer` hook
 * @description Dispatches SET_STATE and LOADING to any Context given a object of state to set
 * a context state.
 */
export function useAsyncStateEffect(asyncState, dispatch) {
  function dispatchState() {
    dispatch({ type: LOADING, payload: true });
    if (!asyncState) {
      console.error(
        `Could not update state for context dispatcher ${dispatch} due to asyncState being undefined or null. `,
      );
    } else {
      dispatch({ type: SET_STATE, payload: asyncState });
    }
    dispatch({ type: LOADING, payload: false });
  }
  // Dispatch the state, every time the asyncState updates
  useEffect(() => {
    dispatchState();
  }, [asyncState]);
}

//...
export const UserState = ({ children, asyncState }) => {
  const [state, dispatch] = useReducer(userReducer, INITIAL_USER_STATE);
 // Load the asyncState into this context's state
 useAsyncStateEffect(asyncState, dispatch);
//... rest of state