score:6

Accepted answer

If child component is not memoized then rendering its parent will render the child.

If child component is memoized, you could force update with its reference.

And of course, passing different properties to a child, changing its state, will re-render it.

Changing the key will UNMOUNT the component, it is like making a conditional rendering on it.

Here is an example demonstating everything mentioned:

class Child extends React.Component {
  componentDidMount() {
    console.log("mounted");
  }
  render() {
    console.log("rendered");
    return <div>Child</div>;
  }
}

class App extends React.Component {
  state = {
    counter: 0
  };

  childRef = React.createRef();
  onClick = () => this.forceUpdate();
  onCounter = () => this.setState({ counter: this.state.counter + 1 });
  onRef = () => this.childRef.current.forceUpdate();

  render() {
    return (
      <>
        <Child key={this.state.counter} ref={this.childRef} />
        <button onClick={this.onClick}>Render</button>
        <button onClick={this.onCounter}>Update Key</button>
        <button onClick={this.onRef}>Render with ref</button>
      </>
    );
  }
}

Edit lucid-hill-vfvr3

score:1

<RTable key={some variable that changes between renders} />

As pointed out below this will cause unmount, which causes the child to lose its state and also run componentWillUnmount, componentDidMount and constructor methods (which may be useful when you want to resubscribe).

Documentation https://reactjs.org/docs/glossary.html#keys


Related Query

More Query from same tag