useFetchState
This hook handles the data fetching process. Returns information about the data retrieval process and saves the results in a state.
import React, { useEffect } from 'react';
import { useFetchState } from 'eventrix';
const UsersList = () => {
    const [
        {
            isLoading,
            data: users,
            isSuccess,
            isError,
            error,
            status
        },
        emitFetch,
    ] = useFetchState('users');
    
    useEffect(() => {
        emitFetch();
    }, [emitFetch])
    
    if (isLoading) {
        return <div>Loading</div>
    }
    
    if (isError) {
        return <div>
            <div>Fetch list failed</div>
            <div>Error: {error.message}</div>
        </div>
    }
    
    return (
        <div>
            {users.map(user => <div key={user.id}>{user.name}</div>)}
        </div>
    );
}import React, { useEffect } from 'react';
import { useFetchState } from 'eventrix';
import { User, UserFetchParams} from './interfaces';
const UsersList = () => {
    const [
        {
            isLoading,
            data: users,
            isSuccess,
            isError,
            error,
            status
        },
        emitFetch,
    ] = useFetchState<User[], UserFetchParams>('users');
    
    useEffect(() => {
        emitFetch();
    }, [emitFetch])
    
    if (isLoading) {
        return <div>Loading</div>
    }
    
    if (isError) {
        return <div>
            <div>Fetch list failed</div>
            <div>Error: {error.message}</div>
        </div>
    }
    
    return (
        <div>
            {users.map(user => <div key={user.id}>{user.name}</div>)}
        </div>
    );
}Last updated
Was this helpful?