title: How do we improve the performance of a react application which renders the the deep nested tree data with a recursive component
body: <p>I have a react application, where we will receive the data from API in a tree structure format like below. (The maximum no of nodes that the API can return are ~30000 including leaf/child/all nodes)</p>
  <p><a href="https://jsonblob.com/76ee90ba-1c66-11eb-92fc-afc1c3197baa" rel="nofollow noreferrer">JSON sample response</a></p>
  <p>I have developed a recursive react functional component to render the data with some sort of styling based on the tree structure entity type (like a paragraph, author, year, etc). Which looks like below.</p>
  <pre class="lang-js prettyprint-override"><code>function Recursive({ articleContent }) {
    switch (articleContent.type) {
      case ENTITY_TYPES.TITLE:
        return (
          &lt;h3 style={{ textTransform: &quot;capitalize&quot; }}&gt;{articleContent.title}&lt;/h3&gt;
        );
      case ENTITY_TYPES.PARAGRAPH:
        return (
          &lt;div&gt;
            &lt;p&gt;{articleContent.data}&lt;/p&gt;
          &lt;/div&gt;
        );
      case ENTITY_TYPES.AUTHOR:
        return (
          &lt;span style={{ alignSelf: &quot;flex-end&quot;, marginRight: &quot;20px&quot; }}&gt;
            {articleContent.author}
          &lt;/span&gt;
        );
      case ENTITY_TYPES.IMAGE:
        return (
          &lt;img
            src={articleContent.url}
            alt=&quot;img&quot;
            style={{ width: 100, height: 100 }}
          /&gt;
        );
      case ENTITY_TYPES.YEAR:
        return (
          &lt;span style={{ border: &quot;1px solid grey&quot;, padding: 5 }}&gt;
            {articleContent.year.toString()}
          &lt;/span&gt;
        );
      case ENTITY_TYPES.QUOTE:
        return (
          &lt;blockquote
            style={{
              background: &quot;#f9f9f9&quot;,
              borderLeft: &quot;10px solid #ccc&quot;,
              margin: &quot;1.5em 10px&quot;,
              padding: &quot;0.5em 10px&quot;
            }}
          &gt;
            {articleContent.quote}
          &lt;/blockquote&gt;
        );
      case ENTITY_TYPES.CHILD:
        return articleContent.child.map((_leafNode, i) =&gt; {
          return &lt;Recursive key={i} articleContent={_leafNode} /&gt;;
        });
      default:
        return null;
    }
  }
  
  </code></pre>
  <p>The react application is just working as expected without any flaws.
  The problem I'm facing is, when we have large data nodes from the API, the rendering is taking so long. Is there any way to overcome this sort of problem?</p>
  <p>Could someone help me with this!!</p>
  <p>Here is the <a href="https://codesandbox.io/s/agitated-minsky-9h6eb?file=/src/App.js" rel="nofollow noreferrer">CodeSandBox</a>, which has some mock API call with mock data response.</p>
  <p>Try changing the below value and see the rendering delays</p>
  <pre class="lang-js prettyprint-override"><code>// Change the no of articles here and see the rendering time
  const NO_OF_ARTICLES = 2; 
  // to something
  const NO_OF_ARTICLES = 5000; 
  
  
  </code></pre>
  <ul>
  <li>I have tried to implement react memorization techniques (of course the memorization not required in this application, as there are no frequent state/prop changes). But I don't see any improvement while rendering the data.</li>
  <li>Nextjs is not the best solution for this application (due to some limitations)</li>
  </ul>
  <p>PS: Ignore typos / grammar</p>