Получение данных с сервера React Hooks

Раньше, чтобы получить данные с сервера на React мы использовали метод lifecycle componentDidMount, он вызывается после рендеринга компонента, один раз, поэтому он идеально подходит для получения данных с бекенда.

Но недавно появилась тенденция работать не в классах, а на функциях с использованием React Hooks, который предоставляет аналогию к разработке, с версии React 16.8.

Нет хука, который бы идеально заменял бы componentDidMount, но есть один хук, который заменяет одновременно и componentDidMount, и componentDidUpdate, этот хук называется useEffect.

Рассмотрим пример, как с помощью useEffect и axios получить данные с сервера и отобразить их.

import React, {useEffect, useState} from 'react';
import axios from 'axios';

function App() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://jsonplaceholder.typicode.com/posts',
            );
            setPosts(result.data);
        };
        fetchData();
    }, []);

    return (
        <div className="App">
            {posts.map(item => (
                <div key={item.id}>
                    {item.title};
                </div>
            ))}
        </div>
    );
}

export default App;