React-Bootstrap Modal rendering twice

Question

I used React-Bootstrap Modal and don't understand why Foo component is rendering twice?

import { Modal, Button } from 'react-bootstrap';

const Foo = (props) => {
  console.log(‘a’);
  return(
    <div>foo</div>
  )
}

class Example extends Component {
  render() {
    return(
      <Modal show={true}>
        <Foo />
      </Modal>
    )
  }
}

Answer 1

Looks like Bootstrap modal sets state when the modal enters (even if show is initially set to true as you have above). Please see https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L202-L209 . Therefore, a render would be triggered again causing Foo to render twice.

EDIT: You actually have to go all the way back to React-transition-group to understand why the onEntering function is actually called. https://github.com/reactjs/react-transition-group/blob/master/src/Transition.js#L192 . On componentDidMount this.updateStatus is called which eventually calls onEntering.