Tengo una matriz de 16 objetos y uso el accesorio "número" para cortar elementos no deseados. Entonces, si quiero una matriz de 8 elementos, escribiría:

 <Images number="8"/>

Sin embargo, mi useEffect no se ejecuta después del renderizado inicial, sino solo después de que hago un cambio en la matriz más adelante, esto devuelve los 16 elementos, si cometo un error tipográfico, espero a que se procese una pantalla de error y corrija un error tipográfico, mi navegador muestra 8 elementos como debería. Este es el resto de mi código:

 const Images = (props) => { const [deck, setDeck] = useState(data); // data.length is equal 16 const sliceDeck = () => { data.splice(parseInt(props.number, 10), data.length) } useEffect(()=>{ sliceDeck() setDeck(data) }, []) return ( <> <div className="img-container"> {deck.map(object => <div className="img-on" key={object.id}><img src={object.src} alt=""/></div>)} </div> </> ); } export default Images;