title: How to use axios in Effect Hook?
body: <p>In class based Component:</p>
  
  <pre><code>componentDidMount() {
      axios.get('https://jsonplaceholder.typicode.com/posts').then((res) =&gt; {
          this.setState({
              posts: res.data.slice(0, 10)
          });
          console.log(posts);
      })
  }
  </code></pre>
  
  <p>I tried this:</p>
  
  <pre><code>const [posts, setPosts] = useState([]);
  
  useEffect(() =&gt; {
      axios.get('https://jsonplaceholder.typicode.com/posts').then((res) =&gt; {
          setPosts(res.data.slice(0, 10));
          console.log(posts);
      })
  });
  </code></pre>
  
  <p>It creates an infinite loop. If I pass a []/{} as the second argument[1][2], then it blocks further call. But it also prevents the array from updating.</p>
  
  <p>[1] <a href="https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect">Infinite loop in useEffect</a></p>
  
  <p>[2] <a href="https://stackoverflow.com/questions/53120972/how-to-call-loading-function-with-react-useeffect-only-once">How to call loading function with React useEffect only once</a></p>