import * as React from 'react';
import PropTypes from 'prop-types';

const DataFetcher = ({children, getData, parameters}) => {
    const [state, dispatch] = React.useReducer(
        (state, action) => {
            switch (action.type) {
                case 'FETCH_DATA':
                    return {
                        isLoading: true,
                        data: null,
                    };
                case 'SUCCESS':
                    return {
                        isLoading: false,
                        data: action.payload,
                    };
                default:
                    throw new Error('The reducer of DataFetch was called with the wrong action');
            }
        },
        {
            isLoading: true,
            data: null,
        }
    );

    const fetchData = parameters => {
        if (parameters === null) return;
        dispatch({type: 'FETCH_DATA'});
        getData(parameters).then(results => {
            dispatch({
                type: 'SUCCESS',
                payload: results,
            });
        });
    };

    React.useEffect(
        () => {
            fetchData(parameters);
        },
        [parameters]
    );

    return children({data: state.data, isLoading: state.isLoading});
};

DataFetcher.propTypes = {
    children: PropTypes.func.isRequired,
    getData: PropTypes.func.isRequired,
    parameters: PropTypes.any,
};

export default DataFetcher;

import * as React from 'react';
import PropTypes from 'prop-types';

const DataFetcher = ({children, getData, parameters}) => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [data, setData] = React.useState(null);

    const fetchData = parameters => {
        if (parameters === null) return;
        setIsLoading(true);
        getData(parameters).then(results => {
            setData(results);
            setIsLoading(false);
        });
    };

    React.useEffect(
        () => {
            fetchData(parameters);
        },
        [parameters]
    );

    return children({data, isLoading});
};

DataFetcher.propTypes = {
    children: PropTypes.func.isRequired,
    getData: PropTypes.func.isRequired,
    parameters: PropTypes.any,
};

export default DataFetcher;

--- 
+++ 
@@ -2,37 +2,15 @@
 import PropTypes from 'prop-types';
 
 const DataFetcher = ({children, getData, parameters}) => {
-    const [state, dispatch] = React.useReducer(
-        (state, action) => {
-            switch (action.type) {
-                case 'FETCH_DATA':
-                    return {
-                        isLoading: true,
-                        data: null,
-                    };
-                case 'SUCCESS':
-                    return {
-                        isLoading: false,
-                        data: action.payload,
-                    };
-                default:
-                    throw new Error('The reducer of DataFetch was called with the wrong action');
-            }
-        },
-        {
-            isLoading: true,
-            data: null,
-        }
-    );
+    const [isLoading, setIsLoading] = React.useState(true);
+    const [data, setData] = React.useState(null);
 
     const fetchData = parameters => {
         if (parameters === null) return;
-        dispatch({type: 'FETCH_DATA'});
+        setIsLoading(true);
         getData(parameters).then(results => {
-            dispatch({
-                type: 'SUCCESS',
-                payload: results,
-            });
+            setData(results);
+            setIsLoading(false);
         });
     };
 
@@ -43,7 +21,7 @@
         [parameters]
     );
 
-    return children({data: state.data, isLoading: state.isLoading});
+    return children({data, isLoading});
 };
 
 DataFetcher.propTypes = {
Replace useState by useReducer in DataFetcher
