CODEWITHSUNDEEP
javascriptreactjs
Abhishek Kumar
Abhishek Kumar

Reputation: 95

How to stop rerendering of child component when parent rerenders

I am a beginner in React. I am working on a project where I have a parent component. When I click on a link, it renders a modal. The modal is an another component.

Now If I make some changes in my parent component and click on the link, all the changes get reset. I know it's because parent component renders again .is there a way to stop this?

export default class Positions extends DJSComponent {

    static propTypes = {
        positionGridData: PropTypes.array.isRequired
    };
    static defaultProps = {
        positionGridData: []
    };

    state = {
        showModalForAddNew: false,
    };
    
    closeAddNewModal = () => {
        this.setState( {
            showModalForAddNew: false
        });
    };

    openAddNewModal =() => {
        this.setState( {
            showModalForAddNew: true
        });
    };

    render() {
        return (
        
              <div>
                  <Modal 
                    key="modal_addnew" 
                    modalTitle={'Add a New Row'}
                    show={this.state.showModalForAddNew} 
                    onModalClose = {this.closeAddNewModal} >

                     < AddNewModal /> 

                  <Modal>
                  
                  <Button 
                      onClick={this.openAddNewModal}
                  >
                      Add New
                  </Button>

                  <Grid
                      data={this.props.positionGridData}
                      style={{border:'1px solid silver'}}
                  />

            </div>
          );
    }
}

Basically, Grid Component is rendering a grid for me in the parent component. I don't want my Grid to get rendered again if I click on the Add New button . Like If I reorder my columns of the grid based on my preference and then when i click on Add New button, it's all gone as grid gets rendered again.

Edit 1:

My initial grid

Now let's say I changed the columns like this. Edited grid

Now if I click on Add New button, my Grid comes back to Initial state as it gets rendered again which I don't want.

Upvotes: 1

Views: 1080

Answers (1)

Ritesh Bansal
Ritesh Bansal

Reputation: 3238

You are passing style as the object here like this while rendering Grid Component:

style={{border:'1px solid silver'}}

It will always pass a new reference of the JSON object to Grid Component whenever your Positions Component renders. It would be better if you put style as a constant at the top of the file and you that constant here or you define the style using className.

Ex:

const gridStyle = {border:'1px solid silver'} // at the top of the file or just import this from other file containing styles

Use it in render like this:

 <Grid
   data={this.props.positionGridData}
   style={gridStyle}
 />

As I can see, you are just doing setState in openAddNewModal function and you are not changing positionGridData passed to Grid Component. You can use shouldComponentUpdate function in your Grid Component and shallowCompare the new props with the older one just like this:

import shallowEqual from 'shallowequal'

class Grid extends React.Component {
  shouldComponentUpdate(nextProps) {
    !shallowEqual(this.props, nextProps)
  }
  render() {
    ...
  }
}

shallowEqual will do the shallow comparison of the values. For more detail, you can go here

Upvotes: 1

Related Questions