title: Uncaught RangeError: Maximum call stack size exceeded in React js while calling custom hooks
body: <p>I am trying to send a <code>success</code> or <code>error</code> value from my <code>Edit</code> component and setting that value to that value to <code>useAlert</code> hooks. And then calling the <code>useAlert</code> hooks from the <code>List</code> component and trying to render the message above the <code>List</code> according to the <code>success</code> or <code>error</code> value that was returned by the <code>useAlert</code> hooks. but I am getting error while calling the hooks from the <code>List</code> component.</p>
  <p>My Custom Hooks is below:
  <code>useAlert.js</code>:</p>
  <pre><code>import React from &quot;react&quot;;
  
  function useAlert(props){
  
      const [alert, setAlert] = useAlert(&quot;&quot;);
  
      useEffect(()=&gt;{
          setAlert(props.alert);
      },[]);
      return alert;
  }
  export default useAlert;
  </code></pre>
  <p>From below Component, i am calling the custom hooks:
  <code>List.js</code>:</p>
  <pre><code>import React,{useState, useEffect} from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import Moment from 'react-moment';
  import {Link} from &quot;react-router-dom&quot;;
  import Pagination from &quot;react-js-pagination&quot;;
  import useAlert from &quot;../hooks/useAlert.js&quot;;
  import Error from &quot;../alerts/Error.js&quot;;
  import Success from &quot;../alerts/Success.js&quot;;
  
  function List(){
  
      const [alert, setAlert] = useState(&quot;&quot;);
      
      let alo = useAlert(alert);
  
      const [categories, setCategories] = useState([]);
      const [activePage, setActivePage] = useState(1);
      const [itemsCountPerPage, setItemsCountPerPage] = useState(0);
      const [totalItemsCount, setTotalItemsCount] = useState(0);
  
      useEffect(()=&gt;{
          axios.get('http://127.0.0.1:8000/categories')
            .then(function (response) {
              console.log(response);
              setActivePage(response.data.current_page);
              setCategories(response.data.data);
              setItemsCountPerPage(response.data.per_page);
              setTotalItemsCount(response.data.total);
            })
            .catch(function (error) {
              console.log(error);
            });
      },[]);
  
      function handleClick(id){
  
          axios.delete('http://127.0.0.1:8000/delete/'+id)
            .then(function (response) {
              console.log(response);
              setActivePage(response.data.current_page);
              setCategories(response.data.data);
              setItemsCountPerPage(response.data.per_page);
              setTotalItemsCount(response.data.total);
            })
            .catch(function (error) {
              console.log(error);
            });
      }
      function handlePageChange(pageNumber) {
          console.log(`active page is ${pageNumber}`);
          
          axios.get('http://127.0.0.1:8000/categories?page='+pageNumber)
            .then(function (response) {
              console.log(response);
              setActivePage(response.data.current_page);
              setCategories(response.data.data);
              setItemsCountPerPage(response.data.per_page);
              setTotalItemsCount(response.data.total);
            })
            .catch(function (error) {
              console.log(error);
            });
        }
  
      return(
              &lt;&gt;
              
              {alo===&quot;success&quot; ? &lt;Success msg=&quot;Category Updated successfully.&quot; /&gt;:null}
  
              &lt;table className=&quot;table&quot; style={{marginTop: &quot;20px&quot;}}&gt;
                &lt;thead&gt;
                  &lt;tr&gt;
                    &lt;th scope=&quot;col&quot;&gt;SL.&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;Name&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;Created_at&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;Updated_at&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;Edit&lt;/th&gt;
                    &lt;th scope=&quot;col&quot;&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                {
                  categories.map((category, index)=&gt;{
  
                      return(
                              &lt;tr key={index}&gt;
                                &lt;th scope=&quot;row&quot;&gt;{index+1}&lt;/th&gt;
                                &lt;td&gt;{category.name}&lt;/td&gt;
                                &lt;td&gt;&lt;Moment format=&quot;D MMM YYYY&quot;&gt;{category.created_at}&lt;/Moment&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;Moment format=&quot;D MMM YYYY&quot;&gt;{category.updated_at}&lt;/Moment&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;Link to={`/edit/${category.id}`} className=&quot;btn btn-primary&quot;&gt;Edit&lt;/Link&gt;&lt;/td&gt;
                                &lt;td&gt;&lt;button onClick={()=&gt;handleClick(category.id)} type=&quot;button&quot; className=&quot;btn btn-danger&quot;&gt;Delete&lt;/button&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          )
                  })
                }
                 
                &lt;/tbody&gt;
              &lt;/table&gt;
  
                  &lt;div className=&quot;d-flex justify-content-center&quot;&gt;
                      &lt;Pagination
                        activePage={activePage}
                        itemsCountPerPage={itemsCountPerPage}
                        totalItemsCount={totalItemsCount}
                        pageRangeDisplayed={5}
                        onChange={handlePageChange}
                        itemClass=&quot;page-item&quot;
                        linkClass=&quot;page-link&quot;
                      /&gt;
                  &lt;/div&gt;
              &lt;/&gt;
          );
  }
  
  export default List;
  </code></pre>
  <p>I have tried many way but i am getting this below error--&gt;</p>
  <pre><code>Uncaught RangeError: Maximum call stack size exceeded
      at useAlert (app.js:2130)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
      at useAlert (app.js:2131)
  </code></pre>
  <p>Please any expert check the code and let me know what is wrong here ? and how can i solve it?</p>