React -> Simple Context

SimpleContext.tsx

import * as React from 'react';

export interface SimpleContextType {
    userName: string | undefined;
    setUserName: (userName: string | undefined) => void;
}

export const SimpleContext = React.createContext<SimpleContextType>({ userName: undefined, setUserName: () => undefined });

export const SimpleContextProvider = ({ children }: { children: React.ReactNode }): React.ReactElement => {
    const [userName, setUserName] = React.useState<string | undefined>();

    const state = React.useMemo(() => ({ userName, setUserName }), [userName]);
    return <SimpleContext.Provider value={state}>{children}</SimpleContext.Provider>;
};

export const useSimpleContext = (): SimpleContextType => React.useContext(SimpleContext);