When trying to store refs in an array inside a loop, I get weird results when the page re-renders (everything is as expected when the page first renders).

I reproduced the problem in this very small jsfiddle: https://jsfiddle.net/69z2wepo/68251/

class Hello extends React.Component {
  constructor(props) {
      super(props);

      setTimeout(() => { this.setState({foo: 'bar'}); }, 1000);
  }

  render() {
    console.log('--- RENDER ---');

    const divs = [];
    this.elements = [];

    for (let i = 1; i <= 2; i++) {
        divs.push(
            <div
                key={i}
                ref={(ref) => {
                    this.elements.push(ref);

                    console.log(this.elements);
                }}
            >
            </div>
        );
    }

    return (
        <div>
            {divs}
        </div>
    );
  }
}

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

You can see that when the page renders a second time, I suddenly get null values and end up with an array of 4 elements.

Could anyone explain why it behaves like that? Why is the function handling the ref executed 4 times after the second rendering?