CODEWITHSUNDEEP
javascriptreactjsreduxredux-sagaimmutable.js
Erdal SATIK
Erdal SATIK

Reputation: 670

React Component's render method called twice even after data fetched

ListFolders is a React component. And "folders" data prop passed to this component from MainLayout component.

MainLayout component uses redux connect and gets "folders".

Here, my problem inside ListFolders, there are some mapping and calculations while listing folders. So because second call it takes more time and this is an important performance issue.

Basic example below. I am using redux-saga and immutable.js. I am getting name (ContainerDesc), id (IdEncrypted), haveChildFolders and childFolders.

Here, it enters inside if (folders !== undefined) { ... code block twice.

render() {
    const { classes, folders } = this.props;

    let reactListItems = [];
    if (folders !== undefined) {

        var iterator1 = folders[Symbol.iterator]();

        for (let item of iterator1) {

            reactListItems.push({ 
                'name': item.get('ContainerDesc'), 
                'id': item.get('IdEncrypted'),
                'haveChildFolders' : item.get('ChildContainers').size > 0,
                'childFolders': item.get('ChildContainers')
            })

        }
    }

    return (
        <List classes={{ root: classes.list, }}>
            ...
        </List>
    );
}

Upvotes: 0

Views: 293

Answers (2)

Erdal SATIK
Erdal SATIK

Reputation: 670

I found the reason for ListFolders called twice. I am using ListFolders inside SidebarComponent and in Sidebar i used material-ui hidden helper for desktop and mobile menus. Example code below.

<Hidden mdUp implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

<Hidden smDown implementation="css">
   ...
   <Drawer variant="temporary" ... /* Sidebar Drawer */
</Hidden>

Because of that ListFolders renders multiple times even data fetched. I will handle mobile menu with pure css i think.

Upvotes: 0

Prathmesh Kadam
Prathmesh Kadam

Reputation: 186

For second call, folders data might haven't changed and may not be undefined so add one more condition that checks folders data had changed or not in componentWillReceiveProps() something like : 

componentWillReceiveProps(nextProps){    
     if (folders.length !== nextProps.folders.length) {
       return ...
    }
}

Or you can add condition shouldComponentUpdate() and stop component to get updated if condition is not satisfied

shouldComponentUpdate(nextProps){    
         if (folders.length !== nextProps.folders.length) {
           return true
        }
        else{
          return false
        }
    }

Upvotes: 1

Related Questions