Desafio: Implemente um Filtro de Lista de Carros com useMemo
Tarefa
Criar o componente CarList responsável por renderizar uma lista de carros e fornecer uma funcionalidade de busca para filtrá-los com base em seus nomes. Permite que os usuários insiram um termo de pesquisa e filtre dinamicamente a lista de carros conforme essa entrada.
Instruções
- Importar os hooks necessários da biblioteca React.
- Dentro do componente
CarList, declarar uma variável de estadosearchInpute uma função atualizadora de estadosetSearchInpututilizando o hookuseState. InicializarsearchInputcom uma string vazia. - Utilizar o hook
useMemopara memorizar o arrayfilteredCars. A lógica de memoização deve filtrar os carros com base nosearchInput. SesearchInputestiver vazio, retornar todos os carros; caso contrário, filtrar os carros conforme a entrada de pesquisa. - No array de dependências do
useMemo, especificar as variáveis corretas das quais a função memoizada depende.
- Incluir uma declaração
importpara importar o hook necessário da biblioteca React. - Utilizar o hook
useStatepara declarar uma variável de estado e sua função de atualização. - O hook
useMemomemoriza o array de carros filtrados, evitando recálculos desnecessários. - No array de dependências do
useMemo, incluir as variáveis das quais a função memoizada depende (carsesearchInput).
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
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
Desafio: Implemente um Filtro de Lista de Carros com useMemo
Deslize para mostrar o menu
Tarefa
Criar o componente CarList responsável por renderizar uma lista de carros e fornecer uma funcionalidade de busca para filtrá-los com base em seus nomes. Permite que os usuários insiram um termo de pesquisa e filtre dinamicamente a lista de carros conforme essa entrada.
Instruções
- Importar os hooks necessários da biblioteca React.
- Dentro do componente
CarList, declarar uma variável de estadosearchInpute uma função atualizadora de estadosetSearchInpututilizando o hookuseState. InicializarsearchInputcom uma string vazia. - Utilizar o hook
useMemopara memorizar o arrayfilteredCars. A lógica de memoização deve filtrar os carros com base nosearchInput. SesearchInputestiver vazio, retornar todos os carros; caso contrário, filtrar os carros conforme a entrada de pesquisa. - No array de dependências do
useMemo, especificar as variáveis corretas das quais a função memoizada depende.
- Incluir uma declaração
importpara importar o hook necessário da biblioteca React. - Utilizar o hook
useStatepara declarar uma variável de estado e sua função de atualização. - O hook
useMemomemoriza o array de carros filtrados, evitando recálculos desnecessários. - No array de dependências do
useMemo, incluir as variáveis das quais a função memoizada depende (carsesearchInput).
Obrigado pelo seu feedback!