How prevent rerender of parent component in React.js

Question

I have a component ProductList - it's a parent component. In m render method i wrote such code

 return (
        <div>
            <CustomBreadCrumbs routes={this.props.routes} params={this.props.params} />
            { this.props.children ? this.props.children :
                <section className="content">
                    Parent
                </section>
            }
        </div>
    );

When I edit some info in child component my parent component rerender, but i want prevent it. How i can do it?

Dmitriy Kovalenko · Accepted Answer · 2017-02-06 13:23:29Z

4

This is impossible, because only on rerendering parent component calling rerendering of the child.

As you can see there, if you will prevent rerendring of current element with shouldComponentUpdate, the childs render methods will not hired.

But dont worry React Only Updates What's Necessary. So, if your html of the parent element will not change, the real DOM will update only child`s html.

Show case

There is an example in official documentation, of how to create forms. In a few words, your main problem, is that you dont save your values anywhere, as I see, you use Redux and passing all of the data via props. Try to change your code, to save the data in the own state of the component.

And if you will catch an error on BadRequest, you will fire the code, check the equality, for example for message (of an error) and update your component, but your current state, with all user`s data will not be changed.

shouldComponentUpdate(nextProps, nextState) {
    //there you will get the new values and check it, if they not equal
}

componentDidUpdate(prevProps, prevState) {
    //there you can do anything with your new values
}

And if you r using Redux, take a look to Redux Form.

edited Feb 6, 2017 at 13:23

answered Feb 6, 2017 at 13:00

Dmitriy Kovalenko

3,6663 gold badges22 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Over a year ago

I have form in my child component and if I send api call on bad response my form rerender and all data is gone. Maybe you faced with same problem and can help me

Dmitriy Kovalenko Over a year ago

Updated to include some description

Collectives™ on Stack Overflow

How prevent rerender of parent component in React.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related