title: I can't tell why there's an infinite loop in this react code with Material UI grid
body: <p>I have an infinite loop in this code, but I can’t tell why,</p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import VideoCardComponent from './VideoCard';
  import Grid from '@mui/material/Grid';
  import { connect } from 'react-redux';
  import { getVideos } from '../redux/actions/videosActions&amp;Consts';
  import { Typography } from '@mui/material';
  
  const Content = ({ getVideos, videos, loaded }) =&gt; {
      const [ currentGroup, setCurrentGroup ] = useState('');
      const [ printCurrentGroup, setPrintCurrentGroup ] = useState(true);
      const [ firstTime, setFirstTime ] = useState(true);
      useEffect(() =&gt; {
          if (!loaded) {
              getVideos();
          }
      }, []);
  
      const getVideoCard = (videoObj) =&gt; {
          console.log(videoObj);
          if (firstTime) {
              setFirstTime(false);
              setCurrentGroup(videoObj.category_name);
          } else {
              if (videoObj.category_name !== currentGroup) {
                  setPrintCurrentGroup(true);
                  setCurrentGroup(videoObj.category_name);
              } else {
                  if (printCurrentGroup) setPrintCurrentGroup(false);
              }
          }
          return (
              &lt;Grid item xs={4}&gt;
                  {printCurrentGroup ? &lt;Typography variant=&quot;h4&quot;&gt;{videoObj.category_name}&lt;/Typography&gt; : null}
                  &lt;VideoCardComponent {...videoObj} /&gt;
              &lt;/Grid&gt;
          );
      };
      console.log('videos: ', videos);
      return (
          &lt;Grid container spacing={1}&gt;
              {videos.map((videoObj) =&gt; {
                  return getVideoCard(videoObj);
              })}
          &lt;/Grid&gt;
      );
  };
  
  function mapStateToProps(state) {
      return {
          videos: state.videosReducer.videos,
          loaded: state.videosReducer.loaded
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          getVideos: () =&gt; {
              return dispatch(getVideos());
          }
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Content);
  
  </code></pre>
  <p>Videos is an array of 7 objects
  By setting the state variables I get the infinite loop</p>
  <pre><code>        if (firstTime) {
              setFirstTime(false);
              setCurrentGroup(videoObj.category_name);
          } else {
              if (videoObj.category_name !== currentGroup) {
                  setPrintCurrentGroup(true);
                  setCurrentGroup(videoObj.category_name);
              } else {
                  if (printCurrentGroup) setPrintCurrentGroup(false);
              }
          }
  </code></pre>
  <p>The code that shows this component is this</p>
  <pre><code>        &lt;Provider store={configStore}&gt;
              &lt;Grid container direction=&quot;column&quot;&gt;
                  &lt;Grid item&gt;
                      &lt;Header /&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item container&gt;
                      &lt;Grid item xs={2} /&gt;
                      &lt;Grid item container&gt;
                          &lt;Content /&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={2} /&gt;
              &lt;/Grid&gt;
          &lt;/Provider&gt;
  </code></pre>
  <p>How can I set these state variables without causing a re-render
  Thanks in advance</p>
  <p>Rafael</p>