Optimization for Directory Rendering in React

In Project “File Reader” to present a file manager-like react based web page, we are facing a problem, as we required for all the files from server, the json file for 37000 files tooks server almost 6s to respond and then the web page, depend on the cpu speed, tooks almost 9s to render, that is almost 15s to wait for user.

This is not a good result, for further investigation, we use console.log("performance fetch"+(t1-t0)/1000) to check the performance in seconds to see each step takes how long to finish.

we can see the result

1
2

performance fetch 5.283445000000938
performance data prepare 5.33125999999902

that means the data preparation - re-organized data and sorting only tooks about 0.05 s to finish , and the rendering is so much longer if we wish to finish it in initialization of the page.

But here is the fact- we don’t need to render all the sub-directories as the user don’t need to see all the files, they just want to see few of them, so we change the code like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

generateMenu=(data)=>{
     
     let dom = [];
     
     if(data.type == "dir"){
        let list = [];
        if(this.state.isRender){
           for(let item of data.children){
              list.push(this.generateMenu(item));
           }
        }
        dom.push(
           <div className = "Directory" key= {data.name?data.name:defaultDirect.direct} >
              <div onClick = {this.onMenuClicked}  key= {data.name?data.name+1:defaultDirect.direct+1} >
              <i className="far fa-folder-open"  key= {data.name?data.name+2:defaultDirect.direct+2} ></i>
              {data.name?data.name:defaultDirect.direct}
              </div>
              <div style={{display:'none'}} key= {data.name?data.name+3:defaultDirect.direct+3} >
              <div style={styles.fadeInLeft} key= {data.name?data.name+4:defaultDirect.direct+4} >
               {list}
              </div>
              </div>
           </div>
        );
     }else{
        dom.push(
           <div className = "itemContainer">
              <Item_disp item = {data.data} />
           </div>
        )
     }
     
     
     return dom;
}

we check the isRender state before the initialization, and if state change , that means we open a menu, then we will render the all sub-directory under that.

lets see the result:

1

performance whole 5.466634999997041

now the render only took 0.13s , that is 69 times faster than the previous result if we want to render whole 37000 files at the initialization.