title: Fetching the mongodb document taking too long
body: <p>I have a project based on MERN stack, in which after giving the quiz based on the score 10 different documents are fetched from mongodb collection. There are total 2000 documents in mongodb collection.
  While fetching its taking too long rather documents are not loading a loader rotates. How to resolve this?
  The indexing I am doing on _id as this is only unique.</p>
  <pre><code>{&quot;code&quot;: &quot;80&quot;,
          &quot;number&quot;: &quot;3&quot;,
          &quot;intro&quot;: &quot;intro of&quot;,
          &quot;education&quot;: &quot;education details&quot;,
          &quot;training&quot;: &quot;training of exam&quot;,
          &quot;scope&quot;: &quot;scope of exam&quot;,
          &quot;career_name&quot;:&quot;XII Exam&quot;,
          &quot;career_img&quot; :&quot;images/marine.jpg&quot;,
          &quot;abilities&quot;: &quot;Loreupm ipsun&quot;,
          &quot;salary_global&quot;:&quot;$90000&quot;,
          &quot;work_styles&quot;:&quot;Loerum ipsum &quot;}
  
  
  const { repo } = useSelector((state) =&gt; state.rep);
  useEffect(() =&gt; {
      if (!repo) {
        dispatch(fetchRepo(history));
      }  
    }); 
  
   return (
          
              &lt;&gt;
               &lt;Container maxwidth=&quot;sm&quot; component=&quot;main&quot; sx={{ mt: 4, mb: 2, flexGrow: 1 }}&gt; 
    
                &lt;Grid container spacing={3} direction=&quot;row&quot; justifyContent=&quot;center&quot; alignItems=&quot;center&quot; display=&quot;flex&quot;&gt;
                &lt;Fragment&gt;
                  &lt;Grid item xs={12} md={6} sm={6}  alignItems=&quot;center&quot; justifyContent=&quot;center&quot;&gt;
            &lt;Card  sx={{ bgcolor: &quot;#f7f7f7&quot;}} elevation={4} alignItems=&quot;center&quot;&gt;
            &lt;CardMedia
          component=&quot;img&quot;
          height=&quot;194&quot;
          image={repo[2].career_img}
          alt=&quot;Home Page&quot;
          /&gt;
          &lt;CardContent&gt;&lt;div dangerouslySetInnerHTML={{ __html: repo[2].career_name }}&gt;&lt;/div&gt;&lt;/CardContent&gt;
             &lt;/Card&gt;
    &lt;/Grid&gt;
    
    
    &lt;Grid item xs={12} sm={12} md={12} sx={{flexGrow:1}}&gt;
    &lt;Card  sx={{ bgcolor: &quot;#f7f7f7&quot;}} elevation={4}&gt;
             &lt;CardContent&gt; &lt;&gt;&lt;Typography sx={{textAlign:'center'}}&gt;Introduction &lt;/Typography&gt;&lt;div dangerouslySetInnerHTML={{ __html: repo[2].intro }}&gt;&lt;/div&gt;&lt;/&gt;
             &lt;/CardContent&gt;
              &lt;/Card&gt;
    &lt;/Grid&gt;
    
    &lt;Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}}&gt;
             &lt;Card  sx={{  display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
            Education, Training &amp; Experience
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;
            &lt;CardHeader 
            subheaderTypographyProps={{fontSize: 14}}
            subheader= {&lt;div dangerouslySetInnerHTML={{ __html: repo[2].education }}&gt;&lt;/div&gt;} 
            /&gt;        
    &lt;/Card&gt;
    &lt;/Grid&gt;
    
    &lt;Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}}&gt;
    &lt;Card  sx={{  display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
            Scope, Knowledge &amp; Skills
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;
            &lt;CardHeader 
           title= &quot;Growth rate is 5% higher&quot;
           subheaderTypographyProps={{fontSize: 15}}
            subheader= {&lt;div dangerouslySetInnerHTML={{ __html: repo[2].scope }}&gt;&lt;/div&gt;} 
            /&gt;
             &lt;/Card&gt;
    &lt;/Grid&gt;
    
            &lt;Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}} &gt;
             &lt;Card  sx={{  display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
            Job Growth
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;
            &lt;CardHeader 
            title=&quot;Approx&quot;
            subheader={&lt;&gt;&lt;Typography&gt;India : 56%&lt;/Typography&gt;&lt;Divider orientation=&quot;horizontal&quot; flexItem/&gt;
            &lt;Typography&gt;Global: 63%&lt;/Typography&gt;&lt;/&gt;}/&gt;        
    &lt;/Card&gt;
    &lt;/Grid&gt;
    
    &lt;Grid item xs={12} sm={6} md={6} sx={{flexGrow:1}} &gt;
               &lt;Card  sx={{  display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
           Salary Range
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;
              &lt;CardHeader 
            title=&quot;Details&quot;
            subheader={&lt;&gt;&lt;Typography&gt;India: 50Lpa&lt;/Typography&gt;&lt;Divider orientation='horizontal' flexItem/&gt;
            &lt;Typography&gt;Global: &lt;div dangerouslySetInnerHTML={{ __html: repo[2].salary_global }}&gt;&lt;/div&gt; &lt;/Typography&gt;&lt;/&gt;}/&gt;
             &lt;/Card&gt;
    &lt;/Grid&gt;
    
    &lt;Grid item xs={12} sm={6} md={6} sx={{ flexGrow:1}}&gt;
    &lt;Card  sx={{  display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
           Work Styles
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;
              &lt;CardHeader 
            
            subheader= {&lt;div dangerouslySetInnerHTML={{ __html: repo[2].work_styles }}&gt;&lt;/div&gt;} /&gt;
             &lt;/Card&gt;
            &lt;/Grid&gt;
    
            &lt;Grid item xs={12} sm={12} md={12} sx={{flexGrow:1}}&gt;
             &lt;Card  sx={{ display:'flex', bgcolor: &quot;#f7f7f7&quot;}} elevation={4} &gt;
             &lt;Box sx={{ display: 'flex', flexDirection: 'column' , borderRight:'2px black dashed'}}&gt;
          &lt;CardContent sx={{ flex: '1 0 auto' , display:'flex', alignItems:'center'}}&gt;
            &lt;Typography component=&quot;div&quot; sx={{fontWeight:'bold', textAlign:'center'}}&gt;
            Abilities
            &lt;/Typography&gt;
          
            &lt;/CardContent&gt;
           
            &lt;/Box&gt;   
          &lt;CardHeader 
          title=&quot;Abilities you should have:&quot;
          subheader={&lt;div dangerouslySetInnerHTML={{ __html: repo[2].abilities }}&gt;&lt;/div&gt;}/&gt;
            &lt;/Card&gt; 
            &lt;/Grid&gt;
            
  
    &lt;/Fragment&gt;
    &lt;/Grid&gt;
          &lt;/Container&gt;
    &lt;/&gt;
  </code></pre>
  <p>I think its not reading repo[2].career
  I am not sure.</p>