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 JSON Placeholder API
    • 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

npm i @tanstack/react-query @tanstack/react-query-devtools
npm i -D @tanstack/eslint-plugin-query

TanStack Query

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

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

TanStack Query

function App() {
  // ...
}

function MyComponent() {  
  const { isPending, error, data } = useQuery({
    queryKey: ["comments"],
    queryFn: getComments,
  });
  
  // This is where our UI logic will come
}

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

TanStack Query

function App() {
  // ...
}

function Comments() {
  // Queries
  const { isPending, error, data } = useQuery({
    queryKey: ["comments"],
    queryFn: getComments,
  });

  if (error) return "An error has occurred: " + error.message;

  if (isPending) return "Loading...";

  return (
    <div>
      <h1>
        {data.map((comment) => (
          <p key={comment.id}>{comment.body}</p>
        ))}
      </h1>
    </div>
  );
}

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

TanStack Query

PGM3/4 - Data fetching in React

By kareldesmet

Made with Slides.com

PGM3/4 - Data fetching in React

  • 265

More from kareldesmet