title: Why is this reactjs useEffect function running endlessly?
body: <p>Here is a useEffect hook that I used in reactjs:</p>
  <p>Problem: The useEffect calls <code>fetchAllCategories()</code> endlessly. Infact, over 1000 requests until I terminate. I only want it to run on page mount and when I click on the button to change catName state. What could I be doing wrong?</p>
  <pre><code>  const [catName, setCategories] = useState([]);
  
    const categoryRef = useRef();
  
  useEffect(()=&gt;{
     
           const fetchAllCategories = async () =&gt;{
          try{
              const res = await axios.get(`${BASE_URL}/category`)
          return setCategories(res.data);
         
          
          }catch(err){
  
          }
  
          
      }
  
      fetchAllCategories()
      
     
  }, [catName])
  
  
   //create new category
  
  const createNewCategory = async ()=&gt;{
      const categoryName = {
          catName: categoryRef.current.value
      }
      try{
          const response = await axiosPrivate.post(`${BASE_URL}/category`, categoryName, { withCredentials: true,
          headers:{authorization: `Bearer ${auth}`}
          })
          return setCategories([response.data])
          
      }catch(err){
  
      }
      
    }
  </code></pre>
  <p>The button that triggers changes in catName</p>
  <pre><code>&lt;button onClick={ createNewCategory} className='button-general'&gt;Create&lt;/button&gt;
  </code></pre>