React

Hooks: useContext()

Agenda

  • State management
    • Local state VS global state
  • Hooks: useContext( )

Generelt

  • Eksamen
    • Hjemme eksamen
    • 12 dager
    • Dato
      • React (12 dager)
        • Mandag - 20. november 2023 - 09:00
        • Fredag - 01. desember 2023 - 09:00
      • Webteknologi (7 dager)
        • Fredag - 08. desember 2023 - 09:00
        • Fredag - 15. desember 2023 - 15:00

Resten av semesteret

Uke Tema
42 React Router DOM
43 Redux toolkit
44 Hooks: useReducer() + useSelector()
(NB! med forbehold)
45 Repetisjon
46 Lese uke
47 Webtek. eksamen utlevering
48 Webtek. eksamen innlevering
49 Eksamen utlevering
50 Eksamen innlevering

Dekket

Skal dekke

Burde sjekkes ut

Ekstern for react

State management

Lokal state

VS

Global state

Parent

Child

GrandChild

GrandChild

Child

Lokal state

Lokal state

Parent

Child

GrandChild

GrandChild

Child

Global state

Provider

Consumer

Consumer

Consumer

Consumer

Global state

Provider

Consumer

Consumer

Consumer

Consumer

Hooks: useContext()

// Contexts/UserContext.js

import { createContext } from 'react';

export const UserContext = createContext(null);

// App.js
import { UserContext } from './Contexts/UserContext.js';

export const App = () => {
  const firstName = 'Ola';
  const lastName = 'Nordmann';
  const age = 21;
  
  // ...

  return (
    <UserContext.Provider value={{ firstName, lastName, age }}>
    	// ...
    </UserContext.Provider>
  );
}

// Student/Student.jsx
import { UserContext } from '../Contexts/UserContext.js';
import { useContext } from 'react';

export const Student = () => {
  const userContext = useContext(UserContext);

  // ...

  return (
    <div>
      name: {userContext.firstName} {userContext.lastName}
      age: {userContext.age}
    </div>
  );
}

Hooks: useContext()

TypeScript
// Contexts/UserContext.ts

import { createContext } from 'react';

export interface UserContextType {
    firstName: string;
    lastName: string;
    age: number;
}

export const UserContext = createContext<UserContextType>({} as UserContextType);

Hooks: useContext()

Andre alternativer for initialState
// Contexts/UserContext.ts

import { createContext } from 'react';

export interface UserContextType {
  userName: string;
  setUserName: React.Dispatch<React.SetStateAction<string>>;
}

export const UserContext = createContext<UserContextType>({} as UserContextType);

// App.js
import { useState } from 'react';
import { UserContext } from './Contexts/UserContext.js';

export const App = () => {
  const [userName, setUserName] = useState('My Initial Username');
  // ...

  return (
    <UserContext.Provider value={{ userName, setUserName }}>
    	// ...
    </UserContext.Provider>
  );
}

// Student/Student.jsx
import { UserContext } from '../Contexts/UserContext.js';
import { useContext } from 'react';

export const Student = () => {
  const userContext = useContext(UserContext);

  // ...

  return (
    <div>
      user name: {userContext.userName}

	  // ...

      <button onClick={() => userContext.setUserName('set New Username')}>
        Change username
      </button>
    </div>
  );
}

Andre alternativer

  • Redux
  • Redux toolkit

Relevant stoff

 

 

 

 

 

Takk for i dag! :)

Neste gang: React Router DOM