Contenido del Curso
React Mastery
React Mastery
Challenge: Implement a Car List Filter with useMemo
Task
Create the CarList
component responsible for rendering a list of cars and providing a search functionality to filter them based on their names. It allows users to enter a search term and dynamically filters the list of cars based on that input.
Instructions
Import the necessary hooks from the React library.
Inside the
CarList
component, declare a state variablesearchInput
and a state updater functionsetSearchInput
using theuseState
hook. InitializesearchInput
with an empty string.Use the
useMemo
hook to memoize thefilteredCars
array. The memoization logic should filter the cars based on thesearchInput
. IfsearchInput
is empty, return all cars; otherwise, filter the cars based on the search input.In the
useMemo
dependency array, specify the correct variables the memoized function depends on.
Include an
import
statement to import the necessary hook from the React library.Use the
useState
hook to declare a state variable and its updater function.The
useMemo
hook memoizes the filtered cars array, preventing unnecessary recalculations.In the dependency array of
useMemo
, include the variables that the memoized function depends on (cars
andsearchInput
).
¡Gracias por tus comentarios!