title: Too many re-renders when setting state - useSWR
body: <p>I am using <a href="https://swr.vercel.app/docs/data-fetching" rel="noreferrer">useSWR</a> to fetch data and then with the data, I want to get a total by using reduce. If I console.log the value out it works fine but as soon as I try to set the state with the value I get the 'Too may re-renders' message.</p>
  <pre><code>import Admin from &quot;../../../components/admin/Admin&quot;;
  import { useRouter } from &quot;next/router&quot;;
  import styles from &quot;../../../styles/Dashboard.module.css&quot;;
  import { getSession, useSession } from &quot;next-auth/client&quot;;
  import { useState } from &quot;react&quot;;
  
  /* BOOTSTRAP */
  import Col from &quot;react-bootstrap/Col&quot;;
  import Container from &quot;react-bootstrap/Container&quot;;
  import Row from &quot;react-bootstrap/Row&quot;;
  import Spinner from &quot;react-bootstrap/Spinner&quot;;
  import Table from &quot;react-bootstrap/Table&quot;;
  
  import useSWR from &quot;swr&quot;;
  import axios from &quot;axios&quot;;
  
  const General = () =&gt; {
    const [session, loading] = useSession();
    const [adults, setAdults] = useState(null);
    const router = useRouter();
    const { id } = router.query;
  
    const fetcher = (url) =&gt;
      axios
        .get(url, {
          headers: { Authorization: &quot;Bearer &quot; + session.user.servertoken },
        })
        .then((res) =&gt; res.data);
  
    const { data, error } = useSWR(
      `http://localhost:8000/api/admin/general/${id}`,
      fetcher
    );
  
     if (data) {
       const adults = data.map((a) =&gt; a.adults);
       const reducer = (accumlator, item) =&gt; {
         return accumlator + item;
       };
       const totalAdults = adults.reduce(reducer, 0);
       setAdults(totalAdults);
     }
  
    return (
      &lt;Admin&gt;
        &lt;div className={styles.admin_banner}&gt;
          &lt;Container fluid&gt;
            &lt;Row&gt;
              &lt;Col&gt;
                &lt;h2&gt;Bookings&lt;/h2&gt;
                &lt;h6&gt;
                  {adults}
                &lt;/h6&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/Container&gt;
        &lt;/div&gt;
        &lt;Container fluid&gt;
          &lt;Row&gt;
            &lt;Col&gt;
              &lt;div className={styles.admin_container}&gt;
                {!error &amp;&amp; !data &amp;&amp; (
                  &lt;Spinner animation=&quot;border&quot; role=&quot;status&quot;&gt;
                    &lt;span className=&quot;sr-only&quot;&gt;Loading...&lt;/span&gt;
                  &lt;/Spinner&gt;
                )}
                {!error &amp;&amp; data &amp;&amp; (
                  &lt;Table responsive=&quot;md&quot;&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;Name&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      {data &amp;&amp;
                        !error &amp;&amp;
                        data.map((d) =&gt; (
                          &lt;tr key={d._id}&gt;
                            &lt;td&gt;
                              {d.firstName} {d.lastName}
                            &lt;/td&gt;
                          &lt;/tr&gt;
                        ))}
                    &lt;/tbody&gt;
                  &lt;/Table&gt;
                )}
              &lt;/div&gt;
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/Admin&gt;
    );
  };
  
  export async function getServerSideProps(context) {
    const session = await getSession({
      req: context.req,
    });
  
    if (!session) {
      return {
        redirect: {
          destination: &quot;/admin&quot;,
          permanent: false,
        },
      };
    } else {
      return { props: session };
    }
  }
  
  export default General;
  </code></pre>