Data fetching in React

useEffect

useEffect is a React Hook that lets you synchronize a component with an external system.
Welke andere hook kennen we al?

useEffect

useEffect is a React Hook that lets you synchronize a component with an external system.
Welke andere hook kennen we al?
- useState

useEffect

React-documentatie
- You can use an Effect to fetch data for your component.
- Writing data fetching directly in Effects gets repetitive and makes it difficult to add optimizations like caching and server rendering later.
  🤔

useEffect

Voordeel:
- Geen kost voor extra dependency
Nadeel:
- Syntax komt wat vreemd over
- Geen features zoals caching of preloading

useEffect

useEffect(arg1, arg2)

arg1: functie die wordt uitgevoerd. Optioneel geeft deze functie een andere functie terug (cleanup functie) die uitgevoerd wordt vóór useEffect een volgende keer wordt uitgevoerd.
arg2: array van dependencies (= variabelen) waarbij useEffect opnieuw moet uitgevoerd worden wanneer ze veranderen.

useEffect

Even demonstreren met SWAPI
- Belangrijk (!): breng het ophalen (fetch) van data altijd onder in een aparte functie. Waarom?
  - Separation of concerns
  - Tests
- Caveat (!): await is niet mogelijk in useEffect
  - Oplossing: .then() of declaratie

useEffect

Argument 2 bepaalt wanneer useEffect
opnieuw wordt uitgevoerd:
- array met minstens 1 variabele
  - wanneer één van de variabelen wijzigt
- leeg array
  - nooit
- geen waarde (undefined)
  - bij elke re-render

useEffect

Vervolg oefening (repository) omtrent paginatie:
- Deel 1:
  - Wanneer de pagina wijzigt, haal dan de studentendata voor de juiste pagina op via Strapi's API
  - Toon gewoon de naam en voornaam in een lijst
  - Aantal items per pagina: 10

useEffect

Vervolg oefening omtrent paginatie:
- Deel 1

useEffect

Vervolg oefening omtrent paginatie:
- Deel 2
  - # pagina's is nog hard-coded op 86.
    
    Maak dit dynamisch o.b.v. back-end response (meta.pagination.pageCount)

useEffect

Vervolg oefening omtrent paginatie
- Deel 2

useEffect

Vervolg oefening omtrent paginatie:
- Deel 3
  - Voeg een dropdown toe om het
    aantal items per pagina te setten
  - Haal de data vervolgens op met het geselecteerde aantal items per pagina

useEffect

Vervolg oefening omtrent paginatie:
- Deel 3

Data fetching in React

TanStack Query

Simplifies fetching and managing server data
in React applications
- Open source
- Ontworpen door Tanner Linsley, vandaar TanStack
- React-versie wordt vaak React Query genoemd
- Bestaat ook voor Vue, Angular ...

TanStack Query

Daarnaast ook nog:
- TanStack Form
- TanStack Table
- TanStack Router
- ...

TanStack Query

Data management on steroids
- Caching
  - Prefetching
  - Auto refetching
  - Window focus refetching
- Automatic retries
- Built-in loading states, error states ...

TanStack Query

Quick Start met SWAPI
- Stap 1: create + provide client

// Create a client
const queryClient = new QueryClient();

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

render(<App />, document.getElementById('root'));

TanStack Query

Quick Start met SWAPI
- Stap 2: access client + execute query

function App() {
  // ...
}

function MyComponent() {
  // Access client
  const queryClient = useQueryClient();
  
  const { isPending, isError, data, error } = useQuery({ 
    queryKey: ['swapiPeople'], 
    queryFn: getSwapiPeople
  });
  
  // This is where our UI logic will come
}

render(<App />, document.getElementById('root'));

TanStack Query

Quick Start met SWAPI
- Stap 3: onze UI logica toevoegen

function App() {
  // ...
}

function MyComponent() {
  // Access client + execute query here first ...
  
  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((people) => (
        <li key={people.uid}>{people.name}</li>
      ))}
    </ul>
  );
}

render(<App />, document.getElementById('root'));

TanStack Query

Quick Start met SWAPI
- Laadscherm
- Error handling
- Allemaal in ± 30 lijnen code
- Caching? staleTime

const { isPending, isError, data, error } = useQuery({ 
  queryKey: ['swapiPeople'], 
  queryFn: getSwapiPeople,
  staleTime: 5 * 1000
});