Utfordring: Implementer Et Bilfilter Med useMemo
Oppgave
Lag komponenten CarList som har ansvar for å vise en liste over biler og tilby en søkefunksjon for å filtrere dem basert på navn. Den lar brukere skrive inn et søkeord og filtrerer listen over biler dynamisk basert på dette.
Instruksjoner
- Importer nødvendige hooks fra React-biblioteket.
- Inne i
CarList-komponenten, deklarer en tilstandsvariabelsearchInputog en oppdateringsfunksjonsetSearchInputved å brukeuseState-hooken. InitialisersearchInputmed en tom streng. - Bruk
useMemo-hooken for å memoizefilteredCars-arrayet. Memoiseringslogikken skal filtrere bilene basert påsearchInput. HvissearchInputer tom, returner alle biler; ellers filtrer bilene basert på søkeordet. - I avhengighetsarrayen til
useMemo, spesifiser de riktige variablene den memoiserte funksjonen er avhengig av.
- Inkluder en
import-setning for å importere nødvendig hook fra React-biblioteket. - Bruk
useState-hooken for å deklarere en tilstandsvariabel og dens oppdateringsfunksjon. useMemo-hooken memoiserer det filtrerte bil-arrayet og forhindrer unødvendige beregninger.- I avhengighetsarrayen til
useMemo, inkluder variablene som den memoiserte funksjonen er avhengig av (carsogsearchInput).
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
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
Utfordring: Implementer Et Bilfilter Med useMemo
Sveip for å vise menyen
Oppgave
Lag komponenten CarList som har ansvar for å vise en liste over biler og tilby en søkefunksjon for å filtrere dem basert på navn. Den lar brukere skrive inn et søkeord og filtrerer listen over biler dynamisk basert på dette.
Instruksjoner
- Importer nødvendige hooks fra React-biblioteket.
- Inne i
CarList-komponenten, deklarer en tilstandsvariabelsearchInputog en oppdateringsfunksjonsetSearchInputved å brukeuseState-hooken. InitialisersearchInputmed en tom streng. - Bruk
useMemo-hooken for å memoizefilteredCars-arrayet. Memoiseringslogikken skal filtrere bilene basert påsearchInput. HvissearchInputer tom, returner alle biler; ellers filtrer bilene basert på søkeordet. - I avhengighetsarrayen til
useMemo, spesifiser de riktige variablene den memoiserte funksjonen er avhengig av.
- Inkluder en
import-setning for å importere nødvendig hook fra React-biblioteket. - Bruk
useState-hooken for å deklarere en tilstandsvariabel og dens oppdateringsfunksjon. useMemo-hooken memoiserer det filtrerte bil-arrayet og forhindrer unødvendige beregninger.- I avhengighetsarrayen til
useMemo, inkluder variablene som den memoiserte funksjonen er avhengig av (carsogsearchInput).
Takk for tilbakemeldingene dine!