Why is the component re-rendering 3 times?

Question

React

import React from 'react';
import './BkItem.css';

export default class BkItem extends React.Component {
    constructor(props) {
        super(props)

        this.actionClickBk = this.actionClickBk.bind(this)

        console.log("BkItem - constructor")
    }

    getClassColor() {
        const colorInd = Math.round(Math.random() * 10)
        const className = { backgroundColor: `var(--bg-color${colorInd})` }
        return className
    }

    actionClickBk(url, evt) {
        evt.preventDefault();
        //window.open(url).focus();
        window.open(url, "_self");
    }

    componentWillMount() {
        console.log("BkItem - componentWillMount")
    }
    componentDidMount() {
        console.log("BkItem - componentDidMount")
    }

    render() {
        const { currentBk, title } = this.props
        const style = this.getClassColor()
        console.log("BkItem")

        return (
            <div
                className="bk-item"
                style={style}
                onClick={(evt) => this.actionClickBk(currentBk.url, evt)}
            >
                {title}
            </div>
        )
    }
}

Rendered 3 times. The parent is executed 1 time.
If you use PureComponent then 2 times. But still one more time.

Parent code

import React, { Component } from 'react';

import Modal from 'react-bootstrap/Modal'

import './BkModal.css';

import BkFolder from './BkFolder'
import BkItem from './BkItem'

export default class BkOpenFolder extends React.PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            isOpenFolder: this.props.isOpenFolder,
        }
    }

    setOpenFolder = () => {
        this.setState({ isOpenFolder: !this.state.isOpenFolder })
        this.props.setOpenFolder()
    }
    closeOpenFolder = () => {
        this.setState({ isOpenFolder: false })
        this.props.setOpenFolder()
    }

    render() {
        console.log("BkModal")
        const { title, bkFolder } = this.props
        let renderComponent = []

        if (!this.state.isOpenFolder) return null;

        if (!bkFolder.children) {
            renderComponent.push(
                <BkItem
                    title={title}
                />)
        } else {

            for (const currentBk of bkFolder.children) {

                if (!currentBk.children) {
                    renderComponent.push(
                        <BkItem
                            key={currentBk.id}
                            currentBk={currentBk}
                            title={currentBk.title}
                        />)
                } else {
                    renderComponent.push(
                        <BkFolder
                            key={currentBk.id}
                            currentBk={currentBk}
                            title={currentBk.title}
                        />
                    )
                }
            }
        }

        console.log(renderComponent)
        return (
            <Modal
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
                show={this.state.isOpenFolder}
                onHide={this.closeOpenFolder}
                animation={true}
            >
                <Modal.Header closeButton>
                    {title}
                </Modal.Header>
                <Modal.Body
                    style={{ background: "rgb(95, 110, 211)" }}
                >
                    <div >
                        <div className="bk-open-folder">
                            {renderComponent}
                        </div>
                    </div>
                </Modal.Body>
            </Modal>
        )
    }
}

Tell me why is this happening?

Answer 1

The parent is executed 1 time.

The parent for your components is not BkOpenFolder, but Modal.Body, there is also Modal above it. One of them initiates the update of the child tree.
There is no extra time there, for four components:
4 constructor
calls 4 componentWillMount
calls 4 render calls
4 componentDidMount calls
In order to remove unnecessary redrawing of components, you can:
1. Use PureComponent .
2. Implement the shouldComponentUpdate life cycle method .
Components wrapped in a connect call from the react-redux package are also not updated when the tree is redrawn if the incoming properties have not changed.