Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Implemente um Filtro de Lista de Carros com useMemo | React Hooks e Context para Gerenciamento de Estado
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Introdução ao React

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

  1. Importar os hooks necessários da biblioteca React.
  2. Dentro do componente CarList, declarar uma variável de estado searchInput e uma função atualizadora de estado setSearchInput utilizando o hook useState. Inicializar searchInput com uma string vazia.
  3. Utilizar o hook useMemo para memorizar o array filteredCars. A lógica de memoização deve filtrar os carros com base no searchInput. Se searchInput estiver vazio, retornar todos os carros; caso contrário, filtrar os carros conforme a entrada de pesquisa.
  4. No array de dependências do useMemo, especificar as variáveis corretas das quais a função memoizada depende.
  1. Incluir uma declaração import para importar o hook necessário da biblioteca React.
  2. Utilizar o hook useState para declarar uma variável de estado e sua função de atualização.
  3. O hook useMemo memoriza o array de carros filtrados, evitando recálculos desnecessários.
  4. No array de dependências do useMemo, incluir as variáveis das quais a função memoizada depende (cars e searchInput).

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 9

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

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

  1. Importar os hooks necessários da biblioteca React.
  2. Dentro do componente CarList, declarar uma variável de estado searchInput e uma função atualizadora de estado setSearchInput utilizando o hook useState. Inicializar searchInput com uma string vazia.
  3. Utilizar o hook useMemo para memorizar o array filteredCars. A lógica de memoização deve filtrar os carros com base no searchInput. Se searchInput estiver vazio, retornar todos os carros; caso contrário, filtrar os carros conforme a entrada de pesquisa.
  4. No array de dependências do useMemo, especificar as variáveis corretas das quais a função memoizada depende.
  1. Incluir uma declaração import para importar o hook necessário da biblioteca React.
  2. Utilizar o hook useState para declarar uma variável de estado e sua função de atualização.
  3. O hook useMemo memoriza o array de carros filtrados, evitando recálculos desnecessários.
  4. No array de dependências do useMemo, incluir as variáveis das quais a função memoizada depende (cars e searchInput).

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 3. Capítulo 9
some-alt