Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Utfordring: Implementer Et Bilfilter Med useMemo | React Hooks og Context for Tilstandshåndtering
React Mastery

bookUtfordring: 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

  1. Importer nødvendige hooks fra React-biblioteket.
  2. Inne i CarList-komponenten, deklarer en tilstandsvariabel searchInput og en oppdateringsfunksjon setSearchInput ved å bruke useState-hooken. Initialiser searchInput med en tom streng.
  3. Bruk useMemo-hooken for å memoize filteredCars-arrayet. Memoiseringslogikken skal filtrere bilene basert på searchInput. Hvis searchInput er tom, returner alle biler; ellers filtrer bilene basert på søkeordet.
  4. I avhengighetsarrayen til useMemo, spesifiser de riktige variablene den memoiserte funksjonen er avhengig av.
  1. Inkluder en import-setning for å importere nødvendig hook fra React-biblioteket.
  2. Bruk useState-hooken for å deklarere en tilstandsvariabel og dens oppdateringsfunksjon.
  3. useMemo-hooken memoiserer det filtrerte bil-arrayet og forhindrer unødvendige beregninger.
  4. I avhengighetsarrayen til useMemo, inkluder variablene som den memoiserte funksjonen er avhengig av (cars og searchInput).

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 9

Spør AI

expand

Spør AI

ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.17

bookUtfordring: 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

  1. Importer nødvendige hooks fra React-biblioteket.
  2. Inne i CarList-komponenten, deklarer en tilstandsvariabel searchInput og en oppdateringsfunksjon setSearchInput ved å bruke useState-hooken. Initialiser searchInput med en tom streng.
  3. Bruk useMemo-hooken for å memoize filteredCars-arrayet. Memoiseringslogikken skal filtrere bilene basert på searchInput. Hvis searchInput er tom, returner alle biler; ellers filtrer bilene basert på søkeordet.
  4. I avhengighetsarrayen til useMemo, spesifiser de riktige variablene den memoiserte funksjonen er avhengig av.
  1. Inkluder en import-setning for å importere nødvendig hook fra React-biblioteket.
  2. Bruk useState-hooken for å deklarere en tilstandsvariabel og dens oppdateringsfunksjon.
  3. useMemo-hooken memoiserer det filtrerte bil-arrayet og forhindrer unødvendige beregninger.
  4. I avhengighetsarrayen til useMemo, inkluder variablene som den memoiserte funksjonen er avhengig av (cars og searchInput).

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 3. Kapittel 9
some-alt