React Academy · leksjon

Type Context og egendefinerte hooks

Opprett typesikker Context med standardverdier, og skriv egendefinerte hooks med eksplisitte returtyper.

Leksjon 4 av 413 trinn

Type Context og egendefinerte hooks er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Typet kontekst med createContext

Send konteksttypen og en standardverdi til createContext. Bruk null som standard når konteksten må brukes inne i en provider, og håndter dette med en guard.

interface AuthContextType {
  user: User | null;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

const AuthContext = createContext<AuthContextType | null>(null);

Mønsteret med guard-hook

Opprett en egendefinert hook som leser konteksten og kaster en feil hvis den brukes utenfor provideren. Da slipper De null-sjekker på hvert kallested.

export function useAuth(): AuthContextType {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Typing av provideren

Provider-komponenten omslutter children og leverer kontekstverdien. Typ verdiobjektet eksplisitt, slik at TypeScript kan kontrollere at det samsvarer med konteksttypen.

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const login = async (creds: Credentials) => {
    const u = await apiLogin(creds);
    setUser(u);
  };

  const logout = () => setUser(null);

  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

Kontekst med standardverdi

Når det finnes en fornuftig standardverdi, for eksempel et tema, kan De sende den direkte til createContext. Da blir konteksten aldri null, og en guard-hook er ikke nødvendig.

interface ThemeContextType { theme: 'light' | 'dark'; toggle: () => void; }

const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggle: () => {},
});

export const useTheme = () => useContext(ThemeContext);

Typing av returverdier fra egendefinerte hooks

Kommenter returtypen til egendefinerte hooks eksplisitt, eller la TypeScript utlede den. Eksplisitte typer fungerer som dokumentasjon og hindrer utilsiktede endringer i strukturen.

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

function useCounter(initial = 0): UseCounterReturn {
  const [count, setCount] = useState(initial);
  return {
    count,
    increment: () => setCount(c => c + 1),
    decrement: () => setCount(c => c - 1),
    reset: () => setCount(initial),
  };
}

Returtyper for tupler

Hooks som returnerer et par, for eksempel useState, bruker tupler. Typ dem med as const eller en eksplisitt tuppeltype, slik at destruktureringen utledes riktig.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

// Destructuring correctly infers types:
const [isOpen, toggleOpen] = useToggle();

Generiske egendefinerte hooks

Egendefinerte hooks kan også være generiske. En generisk useLocalStorage-hook lagrer alle serialiserbare typer med full typesikkerhet.

function useLocalStorage<T>(key: string, initialValue: T): [T, (val: T) => void] {
  const [stored, setStored] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const setValue = (val: T) => {
    setStored(val);
    localStorage.setItem(key, JSON.stringify(val));
  };

  return [stored, setValue];
}

Typing av useReducer

Definer handlingstyper som diskriminerte unioner og strukturen til tilstanden som et grensesnitt. TypeScript håndhever da gyldige handlingstyper i reduceren.

interface State { count: number; status: 'idle' | 'loading'; }
type Action =
  | { type: 'INCREMENT' }
  | { type: 'SET_STATUS'; payload: State['status'] };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'INCREMENT': return { ...state, count: state.count + 1 };
    case 'SET_STATUS': return { ...state, status: action.payload };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0, status: 'idle' });

Typing av useCallback og useMemo

TypeScript utleder typer for useCallback og useMemo fra factory-funksjonen. Kommenter eksplisitt bare når utledningen mislykkes.

const handleChange = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  },
  [onChange]
);

const sorted = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
); // inferred as typeof items

Mønster for kontekstvelger med typer

En typet selector-hook mottar en selector-funksjon og returnerer bare den nødvendige delen av konteksten, samtidig som full typeutledning bevares.

function useAuthSelector<T>(selector: (ctx: AuthContextType) => T): T {
  const ctx = useAuth();
  return selector(ctx);
}

// Usage — TypeScript infers User | null:
const user = useAuthSelector(ctx => ctx.user);

Unngå any i hooks

Bruk aldri any i egendefinerte hooks. Bruk generiske typer, unknown med typegu forbindelser eller spesifikke grensesnitt for å bevare typekjeden.

// Bad:
function useFetch(url: string): { data: any; loading: boolean } { ... }

// Good:
function useFetch<T>(url: string): { data: T | null; loading: boolean } {
  const [data, setData] = useState<T | null>(null);
  // ...
  return { data, loading };
}

Hurtigsjekk

Hva er hensikten med mønsteret med guard-hook når React-kontekst skal types?

Besvar den i den interaktive leksjonen

Oppsummering

Typ kontekst med et eksplisitt grensesnitt og en hook som håndterer null. Kommenter returtyper for egendefinerte hooks med grensesnitt eller tuppeltyper, bruk generiske typer for gjenbrukbare hooks, og typ useReducer med diskriminerte unioner for handlinger slik at ugyldige dispatch-kall oppdages ved kompilering.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Type Context og egendefinerte hooks» gratis?

Ja – hele teksten i «Type Context og egendefinerte hooks» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Type Context og egendefinerte hooks»?

Opprett typesikker Context med standardverdier, og skriv egendefinerte hooks med eksplisitte returtyper. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Type Context og egendefinerte hooks»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Type props og returtyper for komponenter
Type events og refs i TypeScript
Generiske komponenter og utility-typer
Type Context og egendefinerte hooks

← Tilbake til React Academy