Type to search…

Effect

useEffect és un hook de React que et permet sincronitzar un component amb un sistema extern, com per exemple una API.

On this page

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 per a accedir a una API o un recurs del servidor ho has de fer amb el “hook” useEffect.

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

js
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:

Show solution
js
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:

shell
$ 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.

js
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

Show solution
js
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

Show solution
js
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} />
    </>
  )
}

Fonts