Nel mondo dello sviluppo web, React si è distinto come una libreria ampiamente apprezzata per costruire interfacce utente accattivanti. Uno dei compiti più ricorrenti nello sviluppo web è il recupero di dati da fonti esterne per visualizzarli nella tua applicazione. In questo articolo, ci addentreremo nel mondo del recupero dati in React JS, esplorando le tecniche moderne e le migliori pratiche in voga.
Sia che tu stia sviluppando un feed di notizie, una piattaforma di e-commerce o un'app meteo, il recupero e la visualizzazione di dati da API, database o altre fonti è una necessità ineludibile come le tasse, e React offre un modo flessibile ed efficiente per gestire il recupero e la visualizzazione dei dati.
Il Metodo Tradizionale: componentDidMount
Negli albori di React, i componenti di classe erano la norma, e il modo più comune per recuperare dati era utilizzare il metodo del ciclo di vita componentDidMount. Ecco un esempio di come veniva fatto:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { Component } from 'react';
class DataFetchingComponent extends Component {
state = {
data: null,
};
componentDidMount() {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
this.setState({ data });
});
}
render() {
const { data } = this.state;
return (
<div>
{data ? (
// Render data here
) : (
// Render loading state
)}
</div>
);
}
}
export default DataFetchingComponent;Approccio Moderno: Utilizzo di useEffect e useState
I componenti funzionali, abbinati agli hook, offrono un modo più sintetico e leggibile per recuperare dati. L'hook useEffect è un protagonista in questo approccio, poiché consente di eseguire effetti collaterali nei tuoi componenti, come il recupero dei dati. Vediamo come funziona:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
setData(data);
});
}, []);
return (
<div>
{data ? (
// Render data here
) : (
// Render loading state
)}
</div>
);
}
export default DataFetchingComponent;In questo approccio moderno, definiamo un componente funzionale, DataFetchingComponent, e utilizziamo l'hook useState per gestire lo stato dei dati recuperati. L'hook useEffect si occupa dell'effetto collaterale del recupero dati. Fornendo un array di dipendenze vuoto ([]), ci assicuriamo che l'effetto venga eseguito una sola volta quando il componente viene montato.
Vantaggi dell'Approccio Moderno:
Codice Più Pulito: I componenti funzionali e gli hook portano a un codice più pulito e leggibile, riducendo il boilerplate associato ai componenti di classe.
Prestazioni Migliorate: React ottimizza i componenti funzionali e gli hook, risultando in prestazioni migliori per la tua applicazione.
Test Più Facili: I componenti funzionali sono più facili da testare, in quanto sono semplici funzioni JavaScript. Puoi testare la logica all'interno del tuo componente più efficacemente.
Gestione dei Dati con gli Stati: Quando recuperi dati in React, è fondamentale gestire il suo stato in modo efficiente. Questo assicura che il tuo componente si ri-renderizzi quando i dati arrivano, mostrandoli all'utente.
Calcoli: Nel recupero dati in React, è importante tenere in considerazione i calcoli e l'elaborazione dei dati. Ad esempio, se stai gestendo dati numerici, potrebbe essere necessario eseguire calcoli per trasformare o aggregare i dati prima di renderizzarli nel tuo componente. Ecco un esempio su come calcolare la somma dei numeri recuperati da un'API:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState([]);
const [total, setTotal] = useState(0);
useEffect(() => {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
setData(data);
const sum = data.reduce((acc, item) => acc + item, 0);
setTotal(sum);
});
}, []);
return (
<div>
{data.length > 0 ? (
<div>
<p>Data: {data.join(', ')}</p>
<p>Total: {total}</p>
</div>
) : (
// Render loading state
)}
</div>
);
}
export default DataFetchingComponent; Come abbiamo visto, gli hook useEffect e useState offrono un modo più elegante ed efficiente per gestire il recupero dei dati e la gestione dello stato. Adottando questo approccio moderno, puoi scrivere codice più pulito e più manutenibile, migliorando nel contempo le prestazioni complessive delle tue applicazioni React.
In questo articolo, abbiamo coperto i concetti fondamentali del recupero dati in React e mostrato l'approccio moderno utilizzando componenti funzionali e hook. Con queste conoscenze, hai le basi per costruire applicazioni dinamiche in React, e se hai bisogno di una mano nel tuo progetto sai a chi rivolgerti :)
Buon coding a tutti!
