Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Implementera Ett Billistfilter Med useMemo | React Hooks och Context för Tillståndshantering
React Mastery

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

  1. Importera nödvändiga hooks från React-biblioteket.
  2. Deklarera en state-variabel CarList och en state-uppdateringsfunktion searchInput med hjälp av hooken setSearchInput inuti komponenten useState. Initiera searchInput med en tom sträng.
  3. Använd hooken useMemo för att memoizera arrayen filteredCars. Memoiseringslogiken ska filtrera bilarna baserat på searchInput. Om searchInput är tom, returnera alla bilar; annars filtrera bilarna baserat på sökningen.
  4. Ange rätt variabler i beroende-arrayen för useMemo som den memoiserade funktionen är beroende av.
  1. Inkludera en import-sats för att importera nödvändig hook från React-biblioteket.
  2. Använd hooken useState för att deklarera en state-variabel och dess uppdateringsfunktion.
  3. Hooken useMemo memoiserar den filtrerade bil-arrayen och förhindrar onödiga omberäkningar.
  4. I beroende-arrayen för useMemo, inkludera de variabler som den memoiserade funktionen är beroende av (cars och searchInput).

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 9

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

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

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

  1. Importera nödvändiga hooks från React-biblioteket.
  2. Deklarera en state-variabel CarList och en state-uppdateringsfunktion searchInput med hjälp av hooken setSearchInput inuti komponenten useState. Initiera searchInput med en tom sträng.
  3. Använd hooken useMemo för att memoizera arrayen filteredCars. Memoiseringslogiken ska filtrera bilarna baserat på searchInput. Om searchInput är tom, returnera alla bilar; annars filtrera bilarna baserat på sökningen.
  4. Ange rätt variabler i beroende-arrayen för useMemo som den memoiserade funktionen är beroende av.
  1. Inkludera en import-sats för att importera nödvändig hook från React-biblioteket.
  2. Använd hooken useState för att deklarera en state-variabel och dess uppdateringsfunktion.
  3. Hooken useMemo memoiserar den filtrerade bil-arrayen och förhindrar onödiga omberäkningar.
  4. I beroende-arrayen för useMemo, inkludera de variabler som den memoiserade funktionen är beroende av (cars och searchInput).

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 9
some-alt