title: Understanding React Structure
body: <p>I'm having a few issues understanding how react works. I have the below code, and am wondering where I can do stuff with the returned DataRows</p>
  <pre><code>function App() {
      const [DataRows, setDataRows] = useState([]);
  
      async function getPageData() {
          const ShowId =  window.location.pathname.split(&quot;/&quot;);
          const params = new URLSearchParams([['ShowId', ShowId[2]]]);
          const response = await axios.get(PAGE_DATA_URL, { params });
          setDataRows(response.data['DataRows']); 
      }
      useEffect(() =&gt; {
          getPageData();
      }, []);
  
      // var counter = 0;
  
      if (!DataRows) { return &quot;Loading&quot;; }
  
      /* Do I put an else here to start using DataRows? The below code logs a bunch of zero's
      else {
          console.log(counter);
          counter++;
      }
      */
      return (
      // Or maybe here? Using DataRows to change state results in loops
      );
  }
  export default App;
  </code></pre>
  <p><strong>an example of DataRows is:</strong></p>
  <pre><code>{
    &quot;DataRows&quot;:[{
          &quot;ID&quot;: &quot;EwE0NLOJNj&quot;,
          &quot;DisplayOrder&quot;: &quot;1&quot;,
          &quot;DisplayDiv&quot;: &quot;1&quot;,
          &quot;RowType&quot;: &quot;SponsorBanner&quot;,
          &quot;SponsorBannerTextColor&quot;: &quot;rgba(129, 129, 129,1)&quot;,
          &quot;SponsorBannerBGColor&quot;: &quot;rgba(255, 255, 255, 1)&quot;
        },{
          &quot;ID&quot;: &quot;jrxTRD0aOO&quot;,
          &quot;DisplayOrder&quot;: &quot;1&quot;,
          &quot;DisplayDiv&quot;: &quot;2&quot;,
          &quot;RowType&quot;: &quot;AgendaMenu&quot;,
          &quot;AgendaMenuTextColor&quot;: &quot;rgba(129, 129, 129,1)&quot;,
          &quot;AgendaMenuBGColor&quot;: &quot;rgba(255, 255, 255, 1)&quot;,
          &quot;AgendaMenuButtonBG&quot;: &quot;rgba(96, 140, 96, 1)&quot;
        },{
          &quot;ID&quot;:&quot;ImyftecmJE&quot;,
          &quot;RowType&quot;: &quot;Tab&quot;,
          &quot;DisplayOrder&quot;: &quot;1&quot;,
          &quot;Label&quot;:&quot;MONDAY&quot;
        }
  }
  </code></pre>
  <p>The RowType is the name of a react component. I iterate this object and save the component of the same name to an array based on where it goes on the page. The problem is I also need to change some state variables depending on this data, and if I do that in the return it creates loops.</p>
  <p>So, what actually gets rendered here? I thought it was what was in the return()... but it's everything in App? Sorry for these likely silly questions, but nothing I can find explains what is actually going on in React.</p>
  <p>Or do I do all the initial data stuff in index.js, and just pass what I need as props, ie,</p>
  <pre><code>&lt;App DataRows={DataRows} /&gt;
  </code></pre>