title: Calling API endpoint that is located in service folder outside the functional component with useEffect hook
body: <p>Has anybody a good example of using useEffect hook inside functional component that is connecting to API endpoint as a service from service folder, not directly from the same functional component, is this possible to perform? I am trying to execute this
  ShopScreen.js is calling fetchShops.js from service folder</p>
  
  <p>ShopScreen.js</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import { View, Text, StyleSheet, Button } from 'react-native';
  import { fetchShops } from '../services/fetchShops';
  //import {set} from "react-native-reanimated";
  
  const ShopsScreen = props =&gt; {
      const [shops, setShops] = useState([]);
  
      useEffect(() =&gt; {
          fetchShops();
      }, []);
  
      return(
          &lt;View&gt;
              &lt;Text&gt;The Shops Screen!&lt;/Text&gt;
                  &lt;Text&gt;{console.log(shops.result[0])}&lt;/Text&gt;
          &lt;/View&gt;
      );
  };
  
  const styles = StyleSheet.create({
      screen: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
      }
  });
  
  export default ShopsScreen;
  </code></pre>
  
  <ol start="2">
  <li>fetchShops.js call to API</li>
  </ol>
  
  <pre><code>export const fetchShops = () =&gt; {
      const URL = `https://jsonplaceholder.typicode.com/todos`;
      let data = {};
      return data = fetch(URL)
          .then(response =&gt; response.json())
          .then(data =&gt; console.log(data));
  };
  </code></pre>
  
  <p>Is nothing returning from functional component. Has anybody a solution.</p>