.map() warunkowy render React

Question

Mam tablicę 100 elementów. Chciałbym wyświetlać tylko 3 pierwsze elementy lub wszystkie, co zmieniałbym za pomocą buttona. Moje pytanie czy taki kod jest w porządku, czy jest na to jakiś lepszy sposób ? Bo prawdę mówiąc trochę gryzie mnie w oczy to, że to sprawdzenie wykona się tyle razy ile elementów ma tablica.
 

const [limit, setLimit] = useState(3);

[...]                    

{myEvents && myEvents.map((el, id) => {
                        if(id < limit)
                        return (
                            <EventListElement
                                key={el.id}
                                event={el} />
                        )
                    })}

Jestem też ciekaw jak rozwiązać taki problem jeśli zamiast tego miałbym nieograniczoną liczbę elementów, a chciałbym wyświetlić tylko 3 lub wszystkie.

Answer 1

Wystarczy obciąć tablice przed iterowaniem funkcją slice :) 

 

{myEvents && myEvents.slice(0,limit).map((el, id) => { 
     [...]

Jeśli chcesz mieć wszystkie to wystarczy 

setLimit(myEvents.length)