Simple useContext example (+ useState)

app.tsx

import {AuthContext} from './AuthContext';

export default ({children}) => (
    <AuthContext.AuthProvider initialState={userFromServer}>
        {children}
    </AuthContext.AuthProvider>
);

AuthContext.tsx

import {createContext, useState} from 'react';

import User from '../model/User'; // Random User Model

interface Context {
    user?: User;
    setUser?: (user: User) => void;
}

const initialState: User = null;

export const AuthContext = createContext<Context>({});

export const AuthProvider = ({children, initialState: overrideInitialState}) => {
    const [user, setUser] = useState(overrideInitialState || initialState);

    return <AuthContext.Provider value={{user, setUser}}>{children}</AuthContext.Provider>;
};

component.Navbar.tsx

import {useContext} from 'react';

import {AuthContext} from './AuthContext';

export default () => {
    const {user, setUser} = useContext(AuthContext);

    return (
        <ul>
            (user && <li onClick={() => setUser(null)}>Log Out</li>}
            {!user && <li><a href="/login">Log In</a></li>}
        </ul>
    );
}