Data fetching in React

Data fetching in React

useEffect

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

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
});

PGM4/4 - Data fetching in React

By kareldesmet

Made with Slides.com

PGM4/4 - Data fetching in React

  • 39

More from kareldesmet