Is that possible that a component will also be re-rendered without props and states changing

Question

In React, if father component "A" re-rendered and change the position of its son component "B", but B's props and states aren't changed, then will the "B" be re-rendered? If it will, why is that necessary?

Below is code in parent component, and "Poker" is the child. "this.props.localPokers" is an array which can be added element by clicking a button:

the position of bottom poker has changed

Well, I insert console.log in child render(), it does re-rendered the DOM, so I think the question now becomes if the updating of the child is necessary?

Answer 1

I try to give an answer, with an example that can show what I'm saying. Though, you may want to wait for other people to give other answers too.

Short story: yes, the child Component will be re-rendered, and that's because, being a child of a Component that is being re-rendered, its render() method will be called because of a sort of "waterfall effect": each Component inside a render() method can be seen as a function, thus, if the render() method is called, all the functions inside it are called again, leading to a re-render.

Though, what's important is that, even if the child Component is re-rendered, this does not mean that the DOM will change! Actually, that will not happen, and that's because of the React reconciliation: https://reactjs.org/docs/reconciliation.html.
Basically, React is smart enough to see if something has changed in the DOM, and replace the DOM element that actually needs to change (this is really semplified).

Now, about the example, look at this fiddle:

class Child extends React.Component {
    /* Un-commeting this function, you can see that the render() method is not called agian.
    shouldComponentUpdate(nextProps, nextState) {
        if (JSON.stringify(nextProps) === JSON.stringify(this.props) &&
            JSON.stringify(nextState) === JSON.stringify(this.state)) {
            return false;
        }
        return true;
    }*/
    
    render() {
        console.log("Child's rendering");
        
        return (
            <p>Child says "Hello World"</p>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {show: false};
    }
    
    render() {
        return (
            <div>
                <button onClick={() => this.setState({show: !this.state.show})}>Toggle</button>
                {this.state.show && <p>Parent says: Hello World!</p>}
                <Child />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Each time you click on the button, in the console will be rendered the message Child's rendering, thus the Child Component is running its render() method.

BUT! If you inspect the DOM, when you click the button and the message `Parent says: Hello World" appears on the screen, this is what's happening in the DOM:

As you can see, only the <p> element with the message is changing in the DOM!.

Instead, when you click again the button and the message goes away, this happens:

In this case is the parent <div> element that is changing, and only it, and that's because we have deleted one of its child.

Answer 2

Its necessary Because we’re working with JavaScript, we can change children. We can send special properties to them, decide if we want them to render or not and generally manipulate them to our will.

You can use React's PureComponent if don't want to update Child Component every time when Parent Component updated

You can use shouldComponentUpdate to prevent a rerender of the child component. It can be used to prevent component renderings on a fine-grained level: You can apply equality checks for different props and state, but also use it for other kind of checks. However, imagine you are not interested in checking each incoming prop by itself, which can be error prone too, but only in preventing a rerendering when nothing relevant (props, state) has changed for the component. That’s where you can use the more broad yet simpler solution for preventing the rerender: React’s PureComponent.

import React, { Component, PureComponent } from 'react';

...

class Square extends PureComponent {
  render() {
    return <Item>{this.props.number * this.props.number}</Item>;
  }
}

React’s PureComponent does a shallow compare on the component’s props and state. If nothing has changed, it prevents the rerender of the component. If something has changed, it rerenders the component.