Problem Statement
Define Auth context with user: User | null and setUser; show hook consumers.
Explanation
Type the context value, provide a safe default, and create a useAuth hook that throws if used outside the provider. Consumers get strong types for user and setUser.
Code Solution
SolutionRead Only
import React, { createContext, useContext, useState } from 'react';
type User = { id: string; name: string };
type AuthValue = { user: User | null; setUser: React.Dispatch<React.SetStateAction<User | null>> };
const AuthCtx = createContext<AuthValue | undefined>(undefined);
export function AuthProvider({ children }: { children: React.ReactNode }){
const [user, setUser] = useState<User | null>(null);
return <AuthCtx.Provider value={{ user, setUser }}>{children}</AuthCtx.Provider>;
}
export function useAuth(){
const ctx = useContext(AuthCtx);
if (!ctx) throw new Error('useAuth must be used within AuthProvider');
return ctx;
}
// Consumer
function Header(){
const { user, setUser } = useAuth();
return <div>{user ? `Hi ${user.name}` : 'Guest'}</div>;
}