Cuando trato de almacenar referencias en una matriz dentro de un bucle, obtengo resultados extraños cuando la página se vuelve a renderizar (todo es como se esperaba cuando la página se renderiza por primera vez).
Reproduje el problema en este jsfiddle muy pequeño: 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') );Puede ver que cuando la página se muestra por segunda vez, de repente obtengo valores nulos y termino con una matriz de 4 elementos.
¿Alguien podría explicar por qué se comporta así? ¿Por qué la función que maneja la referencia se ejecuta 4 veces después de la segunda representación?
De la documentación :
React admite un atributo especial que puede adjuntar a cualquier componente. El atributo ref toma una función de devolución de llamada, y la devolución de llamada se ejecutará inmediatamente después de montar o desmontar el componente.
Entonces, la razón por la que se llaman cuatro devoluciones de llamada de ref es porque dos componentes están desmontados y dos están montados.