3. Na którym etapie życia komponentu należy pobierać dane?

Zapytania powinny być wykonywane tak, aby nie blokowały wyświetlania UI użytkownikowi, dzeki czemu aplikacja będzie zachowywać się respomsywnie w oczekiwaniu na dane. Dobrą praktyką jest uruchomienie jakiegoś znacznika, np. animacji lub tzw. skeleton elements na czas ładowania.

Dlatego warto uruchamiać zapytania do API w momencie, gdy komponent jest już wyrenderowany, aplikacja - responsywna i istnieje element, który może wskazywać na trwające ładowanie.

Komponenty Klasowe

Zapytania do zewnętrznego API powinnny być przeprowadzane w metodzie componentDidMount.

class MyComponent extends Component<never, State> {
    componentDidMount = async () => {
        this.setState({isLoading: true});
        await fetchData(...);
        this.setState({isLoading: false});
    };

    render = () => {
        return <>
        {this.state.isLoading ? <div>Waiting...</div> ? <div> Hello World! </div>}
        </>
    };
}

Komponenty Funkcyjne

Miejscem, na przeprowadzanie tzw. side effects jest hook useEffect. Ważne jest zadbanie o to, aby nie wykonywał się za każdym razem, gdy zostanie przerenderowany komponent aby uniknąć niepotrzebnych zapytań:

const MyComponent: FC = () => {
    const [isLoading, setIsLoading] = useState();

    const fetchFunction = useCallback(async () => {
        setIsLoading(true);
        await fetchData(...);
        setIsLoading(false);
    }, []);

    useEffect(() => {
        fetchFunction();
    }, [fetchFunction]);

    return <>
        {isLoading ? <div>Waiting...</div> ? <div> Hello World! </div>}
    </>;
}