React constructor called only once for same component rendered twice

user_6919260 0
Viewed 1512

I expected this toggle to work but somehow the constructor of component <A/> is called only once. https://codesandbox.io/s/jvr720mz75 

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = { toggle: false };
  render() {
    const { toggle } = this.state;
    return (
      <div>
        {toggle ? <A prop={"A"} /> : <A prop={"B"} />}
        <button onClick={() => this.setState({ toggle: !toggle })}>
          toggle
        </button>
      </div>
    );
  }
}

class A extends Component {
  constructor(props) {
    super(props);
    console.log("INIT");
    this.state = { content: props.prop };
  }

  render() {
    const { content } = this.state;
    return <div>{content}</div>;
  }
}

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

I already found a workaround https://codesandbox.io/s/0qmnjow1jw.

<div style={{ display: toggle ? "none" : "block" }}>
  <A prop={"A"} />
</div>
<div style={{ display: toggle ? "block" : "none" }}>
  <A prop={"B"} />
</div>

I want to understand why the above code is not working

reactjs
3 Answers

In react if you want to render same component multiple times and treat them as different then you need to provide them a unique key. Try the below code.

{toggle ? <A key="A" prop={"A"} /> : <A key="B" prop={"B"} />}
user_34397310

Since that ternary statement renders results in an <A> component in either case, when the <App>'s state updates and changes toggle, React sees that there is still an <A> in the same place as before, but with a different prop prop. When React re-renders it does so by making as few changes as possible. So since this is the same class of element in the same place, React doesn't need to create a new element when toggle changes, only update the props of that <A> element.

Essentially, the line

{toggle ? <A prop="A"/> : <A prop="B"/> }

is equivalent to

<A prop={ toggle ? "A" : "B" }/>

which perhaps more clearly does not need to create a new <A> component, only update the existing one.

The problem then becomes that you set the state.content of the <A> using props.prop in the constructor, so the state.content is never updated. The cleanest way to fix this would be to use props.prop in the render method of the <A> component instead of state.content. So your A class would look like this:

class A extends Component {
    render() {
        const { prop } = this.props;
        return <div>{ prop }</div>;
    }
}

If you must take the prop prop and use it in the <A> component's state, you can use componentDidUpdate. Here's an example:

class A extends Component {
    constructor(props) {
        super(props);
        this.state = {content: props.prop};
    }

    componentDidUpdate(prevProps) {
        if (prevProps.prop !== this.props.prop) {
            this.setState({content: this.props.prop});
        }
    }

    render() {
        const { content } = this.state;
        return <div>{ content }</div>
    }
}
user_80686250

React will only call the constructor once. That's the expected outcome. Looks like you're trying to update the state of the component A based on the props. You could either use the prop directly or use the componentDidUpdate lifecycle method, as Henry suggested. Another way is using the static method getDerivedStateFromProps to update the state based on the prop passed.

static getDerivedStateFromProps(props, state) {
    return ({
        content: props.prop
    });
}
user_88124830
Related