Utmaning: Implementera Ett Billistfilter Med useMemo
Uppgift
Skapa komponenten CarList som ansvarar för att rendera en lista med bilar och tillhandahålla en sökfunktion för att filtrera dem baserat på deras namn. Den gör det möjligt för användare att ange ett sökord och filtrerar dynamiskt listan med bilar utifrån den inmatningen.
Instruktioner
- Importera nödvändiga hooks från React-biblioteket.
- Deklarera en state-variabel
CarListoch en state-uppdateringsfunktionsearchInputmed hjälp av hookensetSearchInputinuti komponentenuseState. InitierasearchInputmed en tom sträng. - Använd hooken
useMemoför att memoizera arrayenfilteredCars. Memoiseringslogiken ska filtrera bilarna baserat påsearchInput. OmsearchInputär tom, returnera alla bilar; annars filtrera bilarna baserat på sökningen. - Ange rätt variabler i beroende-arrayen för
useMemosom den memoiserade funktionen är beroende av.
- Inkludera en
import-sats för att importera nödvändig hook från React-biblioteket. - Använd hooken
useStateför att deklarera en state-variabel och dess uppdateringsfunktion. - Hooken
useMemomemoiserar den filtrerade bil-arrayen och förhindrar onödiga omberäkningar. - I beroende-arrayen för
useMemo, inkludera de variabler som den memoiserade funktionen är beroende av (carsochsearchInput).
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Can you explain how the useMemo hook helps in this scenario?
What should the filteredCars array contain if the search input is empty?
Which variables should be included in the useMemo dependency array?
Awesome!
Completion rate improved to 2.17
Utmaning: Implementera Ett Billistfilter Med useMemo
Svep för att visa menyn
Uppgift
Skapa komponenten CarList som ansvarar för att rendera en lista med bilar och tillhandahålla en sökfunktion för att filtrera dem baserat på deras namn. Den gör det möjligt för användare att ange ett sökord och filtrerar dynamiskt listan med bilar utifrån den inmatningen.
Instruktioner
- Importera nödvändiga hooks från React-biblioteket.
- Deklarera en state-variabel
CarListoch en state-uppdateringsfunktionsearchInputmed hjälp av hookensetSearchInputinuti komponentenuseState. InitierasearchInputmed en tom sträng. - Använd hooken
useMemoför att memoizera arrayenfilteredCars. Memoiseringslogiken ska filtrera bilarna baserat påsearchInput. OmsearchInputär tom, returnera alla bilar; annars filtrera bilarna baserat på sökningen. - Ange rätt variabler i beroende-arrayen för
useMemosom den memoiserade funktionen är beroende av.
- Inkludera en
import-sats för att importera nödvändig hook från React-biblioteket. - Använd hooken
useStateför att deklarera en state-variabel och dess uppdateringsfunktion. - Hooken
useMemomemoiserar den filtrerade bil-arrayen och förhindrar onödiga omberäkningar. - I beroende-arrayen för
useMemo, inkludera de variabler som den memoiserade funktionen är beroende av (carsochsearchInput).
Tack för dina kommentarer!