title: Function being called multiple times in React functional component
body: <p>Below is the component file <strong>SinglePostBySearch.js</strong></p>
  
  <pre><code>import React, { useState } from 'react'
  import Post from './Post'
  const axios = require('axios')
  
  const getElt=({loading},{isThereQuery},{posts})=&gt;{
      console.log(posts)
      if(!loading &amp;&amp; isThereQuery)
      {
          return(
              &lt;Post post={posts} id={posts.id} /&gt; 
          )
      }
      if(loading)
      {
          return &lt;div&gt;Loading&lt;/div&gt;
      }
      if(!(loading &amp;&amp; posts))
      {
          return &lt;div&gt;No post from the user&lt;/div&gt;
      }
  }
  
  function SinglePostBySearch(props) {
      const [posts, setPosts] = useState({})
      const [isThereQuery,setIsThereQuery]=useState(false)
      const [loading,setIsLoading]=useState(false)
      const fetchPost = (event) =&gt; {
          const postId = event.target.value
          if (postId) {
              setIsThereQuery(false)
              setIsLoading(true)
              axios.get(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(res =&gt; {
                  setPosts(res.data)
                  setIsThereQuery(true)
                  setIsLoading(false)
              }).catch(err =&gt; {
                  console.log(err)
                  setIsLoading(false)
                  setPosts({})
              })
          }
          else{
              setPosts({})
              setIsThereQuery(false)
          }
  
      }
      return (
          &lt;div&gt;
              Hello {props.username}, enter a &lt;strong&gt;userId&lt;/strong&gt; below
              &lt;input type="text" onChange={fetchPost} /&gt;
              {getElt({loading},{isThereQuery},{posts})}
          &lt;/div&gt;
      )
  }
  export default SinglePostBySearch
  </code></pre>
  
  <p><strong>Problem/Question</strong>: Within the functional component's return, in the third line, I'm making a call to a another function <strong>getElt</strong>. It seems to be called around 4 or 5 times, which I figured from the console.log I inserted in the first line of the <strong>getElt</strong> function. I would like to know why it's being called so many times when it should be called just once.</p>
  
  <p>I would like to point out that I do not have any console log statements in the child component <strong>Post</strong> that is being returned by the function <strong>getElt</strong></p>