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?

Answer 1

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 .