Effect

Introducció

useEffect és un hook de React que et permet sincronitzar un component amb un sistema extern.

Obtenir dades

Fetch

A React, per utilitzar la funció fetch ho has de fer amb el “hook” useEffect.

En aquest exemple obtenim una llista de posts amb la funció fetch:

import { useEffect, useState } from "react"

export default function App() {

  const [posts, setPosts] = useState([])

  useEffect(() => {
      (async () => {

        const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
        const data = await response.json()
        setPosts(data)

      })()
  }, [])


  return (
    <div className="container">
      <ul className="list-group mt-5">
        {posts.map(post => <li className="list-group-item">{post.title}</li>)}
      </ul>
    </div>
  )
}

Activitat. Afegeix un missatge d’error:

import { useEffect, useState } from "react"

export default function App() {

  const [currentTime, setCurrentTime] = useState(0)
  const [log, setLog] = useState("")

  useEffect(() => {

    const fetchTime = async () => {


      const response = await fetch('/api/time')
      if (response.status != 200) {
        setLog(response.statusText)
        return
      }

      const data = await response.json()
      setCurrentTime(data.time)

    }

    fetchTime()

  }, [])

  return (
    <div className="container">
      <p className="text-center m-5 p-5 fs-3">The current time is {currentTime}.</p>
      <p className="text-center text-danger fs-4">{log}</p>
    </div>
  )
}

SWR

SWR és una biblioteca React Hooks per a l’obtenció de dades.

El nom “SWR” deriva de stale-while-revalidate, una estratègia d’invalidació de memòria cau HTTP popularitzada per HTTP RFC 5861 (s’obre en una nova pestanya).

SWR és una estratègia per retornar primer les dades en memòria cau (obsoletes), després enviar la sol·licitud de recuperació (revalidació), i finalment lliurar les dades actualitzades.

Amb SWR el component obtindrà constant i automàticament el darrer flux de dades. I la interfície d’usuari serà sempre ràpida i reactiva.

Instal·la swr:

$ bun add swr

En aquest exemple, el hook useSWR accepta una key que és una cadena i una funció fetcher. key és un identificador únic de les dades (normalment l’URL de l’API) i passarà al fetcher. El fetcher pot ser qualsevol funció asíncrona que retorni dades, pots utilitzar el fetch natiu o eines com Axios.

El hook retorna 2 valors: data i error, basats en l’estat de la sol·licitud.

import useSWR from 'swr'

export default function App() {

  return <Countries />
}


function Countries() {

  // created function to handle API request
  const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());

  const { data, error, isValidating,
  } = useSWR('https://restcountries.com/v2/all', fetcher)

  // Handles error and loading state
  if (error)
    return <p className="m-5 text-center fs-3">Failed to load</p>

  if (isValidating)
    return <p className="m-5 text-center fs-3">Loading...</p>

  return (
    <div>
      {data.map((country: any, index: number) => (
        <img key={index} src={country.flags.png} width={100} />
      ))}
    </div>
  )
}

Activitats

1.- Mostra la recepta que et mostra aquest enllaç: https://www.themealdb.com/api/json/v1/1/random.php

import useSWR from 'swr'

export default function App() {

  return (
    <div className="container">
      <Meal />
    </div>
  )
}


function Meal() {

  // created function to handle API request
  const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());

  const {
    data, error, isValidating,
  } = useSWR("https://www.themealdb.com/api/json/v1/1/random.php", fetcher)

  // Handles error and loading state
  if (error)
    return <p className="m-5 text-center fs-3">Failed to load</p>

  if (isValidating)
    return <p className="m-5 text-center fs-3">Loading...</p>

  const meal = data.meals[0]

  return (
    <>
      <h2 className='text-center'>{meal.strMeal}</h2>
      <img src={meal.strMealThumb} />
      <p className="border border-3">{meal.strInstructions}</p>
    </>
  )
}

2.- Mostra alguna informació d’aquest repositori: https://rickandmortyapi.com/documentation

Per exemple, el personatge https://rickandmortyapi.com/api/character/2

import useSWR from 'swr'

export default function App() {

  return (
    <div className="container">
      <Character />
    </div>
  )
}


function Character() {

  // created function to handle API request
  const fetcher = (arg: any, ...args: any) => fetch(arg, ...args).then((res) => res.json());

  const {
    data, error, isValidating,
  } = useSWR("https://rickandmortyapi.com/api/character/2", fetcher)

  // Handles error and loading state
  if (error)
    return <p className="m-5 text-center fs-3">Failed to load</p>

  if (isValidating)
    return <p className="m-5 text-center fs-3">Loading...</p>

  return (
    <>
      <h2>{data.name}</h2>
      <p>{data.species}</p>
      <img src={data.image} />
    </>
  )
}

TODO

El contingut d'aquest lloc web té llicència CC BY-NC-ND 4.0.