Tengo un componente que tiene <img src.../> como uno de los hijos. Cuando miro la pestaña de la red, la fuente de la imagen se extrae dos veces en cada nueva representación del componente principal. tengo 2 preguntas:
<img> se vuelva a renderizar? Cada vez que sucede algo en el componente principal, la pestaña de red muestra que la imagen se extrae dos veces, mientras que no necesito que se vuelva a extraer en absoluto. He intentado crear un componente separado que todo lo que tiene es la etiqueta <img> . Lo probé como una función y una Clase y como una función memorizada:
const MyImage = React.memo(props => { console.log('render image')// logged once per render, but source pulled twice return <img alt="" src={props.src} onLoad={props.onLoad}/> })y así:
class MyImage extends React.Component { shouldComponentUpdate(nextProps, nextState, nextContext) { console.log(nextProps, this.props)// never logged return nextProps.src === this.props.src; } render() { console.log('render img')//logged once per render, but source pulled twice return <img alt="" src={this.props.src} onLoad={this.props.onLoad}/> } }y así:
function MyImage(props) { const {src, onLoad} = props; const [source, setSource] = useState(src); useEffect(() => { console.log('use effect') setSource(src); }, []); // React Hook useEffect has a missing dependency: 'src'. But shouldn't it be empty for initial loads? return <img alt="" src={source} onLoad={onLoad}/> } Parece que el evento onLoad podría estar causando que la fuente se extraiga dos veces (si la elimino, la pestaña de red muestra solo una solicitud). ¿Pero por qué? Todo lo que onLoad está haciendo es establecer clases que son utilizadas por el componente principal