Este é o sexto artigo de uma série de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programação.
O useCallback
é um hook do React que retorna uma função memorizada. Isso significa que a função só é recriada quando uma de suas dependências mudar.
Caso contrário, a mesma instância de função é retornada em todas as chamadas.
O useCallback
é útil quando você tem um componente que precisa passar uma função para um componente filho ou para uma função de gancho, mas quer evitar que a função seja recriada toda vez que o componente pai é renderizado. Isso pode ajudar a evitar o ciclo de atualização de componentes indesejado e aumentar a performance de sua aplicação.
Como usar o useCallback
Aqui está um exemplo da funcionalidade do useCallback
:
(Acompanhe em "Show files>src>App.jsx")
O código acima é de uma função chamada App
que usa o hook useState
para gerenciar o estado de uma variável chamada count
. Ele também cria duas funções memorizadas usando o hook useCallback: increment
e reset
.
A função increment
é criada usando o useCallback
com uma lista de dependências contendo apenas a variável count
. Isso significa que a função só será recriada quando o valor de count
mudar. A função increment
é usada como um manipulador de cliques para um botão e, quando clicada, incrementa o valor de count
em 1.
A função reset
é criada de maneira semelhante, usando o useCallback
com uma lista de dependências contendo apenas a variável count
. Isso significa que a função só será recriada quando o valor de count
mudar. A função reset
é usada como um manipulador de cliques para outro botão e, quando clicada, define o valor de count
como 0.
O objetivo do useCallback
é garantir que as funções increment
e reset
sejam criadas apenas quando necessário, evitando que elas sejam recriadas toda vez que o componente é renderizado. Isso pode ajudar a evitar o ciclo de atualização de componentes indesejado e aumentar a performance de sua aplicação.
Filtro de lista com useCallback em React
Um uso comum do useCallback
é no caso em que você tem uma lista e pretende realizar uma busca instantânea nos items dessa lista.
O exemplo abaixo demonstra como implementar um filtro de lista de Pokémons através desse hook:
(Acompanhe em "Show files>src>App.jsx")
1 - A primeira chamada a useState
inicializa a variável de estado users
com uma lista de objetos de Pokémon e retorna essa lista e a função setUsers
.
2 - useState
é chamado novamente para inicializar a variável de estado filter
com uma string vazia e retornar essa string e a função setFilter
.
3 - A função handleFilterChange
é criada usando useCallback
e só será recriada se o valor de filter
mudar. A função handleFilterChange
é chamada como um manipulador de evento onChange
de entrada e atualiza o valor de filter
com o valor da entrada.
4 - useCallback
é chamado novamente para criar a função filteredUsers
, que filtra a lista de pokémons (users) com base no valor de filter
. A função filteredUsers
só será recriada se o valor de users
ou filter
mudar.
5 - O componente App
renderiza uma entrada de pesquisa, um botão de reset de filtro e o componente filho ChildComponent
. O valor atual de filter
é passado como o valor da entrada de pesquisa e a função handleFilterChange
é passada como o manipulador de evento onChange
. O componente filho é passado a função filteredUsers
como uma propriedade, que é usada para renderizar uma lista de cards de Pokémon filtrados.
6 - O componente filho ChildComponent
renderiza uma lista de cards de Pokémon usando a propriedade users
, que é uma função de callback passada pelo componente pai. Cada card é composto por uma foto do Pokemon correspondente e seu nome. A foto é exibida através de uma tag img
e a URL da imagem é obtida da propriedade image
do objeto Pokémon. O nome do Pokémon é exibido através de uma tag p
. Cada card é exibido em uma lista através de uma tag li
. Quando o usuário digita algum valor no input de busca, a função handleFilterChange
é chamada para atualizar o valor do filtro. A função filteredUsers
, que é criada com o useCallback
, é usada para filtrar a lista de Pokémons com base no valor atual do filtro.
7 - A lista de Pokémons filtrados é passada como propriedade para o componente filho ChildComponent
e é exibida através de uma lista. Ao clicar no botão "Reset filter", o filtro é resetado para vazio, exibindo novamente todos os Pokémons.
Hook useCallback para evitar a recriação de funções em componentes React
O hook useCallback
do React permite que uma função seja retornada de forma imutável, evitando sua recriação a cada renderização do componente pai. Isso pode ser útil em situações em que uma função é passada como propriedade para um componente filho e pode melhorar a performance da aplicação.
Abaixo, temos um exemplo de código que evita a recriação de funções, o qual continua no caso anterior (lista com pokémons):
(Acompanhe em "Show files>src>App.jsx")
1 - import "./App.css"
importa o arquivo de estilo App.css
para o componente App
.
2 - import { useState, useCallback } from "react"
importa os hooks useState
e useCallback
do pacote react
.
3 - function App()
define o componente App
.
4 - const [selectedType, setSelectedType] = useState(null)
define o estado selectedType
como null
e uma função setSelectedType
para atualizar o estado.
5 - const [pokemons, setPokemons] = useState([{ id: 1, name: "Abra", type: "psychic" }, { id: 2, name: "Bellsprout", type: "grass" }, { id: 3, name: "Chansey", type: "normal" }])
define o estado pokemons
como um array de objetos e uma função setPokemons
para atualizar o estado.
6 - const handleSelectType = useCallback((type) => { setSelectedType(type) }, [selectedType])
cria uma função de callback chamada handleSelectType
usando useCallback
. A função atualiza o estado selectedType
com o argumento type
passado para ela. O segundo argumento para useCallback
é um array de dependências, no caso apenas o valor de selectedType
. Isso significa que, se o valor de selectedType
não mudar, a mesma instância de handleSelectType
será retornada e pode ser reutilizada sem que o componente seja renderizado novamente.
7 - return (...)
retorna JSX que renderiza uma lista de Pokemon e um componente DetailsComponent
, se selectedType
tiver um valor.
8 - function DetailsComponent({ selectedType })
define o componente DetailsComponent
que recebe selectedType
como um prop.
9 - return <div className="type"> Pokemon do tipo: {selectedType}
retorna JSX que renderiza o texto "Pokemon do tipo: [selectedType]".
10 - export default App
exporta o componente App
para ser usado em outros arquivos.
Em resumo, o useCallback
no código acima é usado para criar uma função de callback chamada handleSelectType
que é passada como um prop para um componente filho.
Quando os argumentos passados para useCallback
(no caso, apenas o valor de selectedType
) não mudam, a mesma instância de handleSelectType
é retornada e pode ser reutilizada pelo componente filho sem que ele seja renderizado novamente. Isso pode ser útil para evitar que um componente filho seja renderizado desnecessariamente, pois a função de callback não mudou.
Conclusão
O hook useCallback
do React é uma ferramenta útil para evitar a recriação de funções a cada renderização de um componente, o que garante uma melhor performance à aplicação.
Além disso, ao retornar uma função imutável, o useCallback
garante que a função passada como propriedade para um componente filho não mude a cada renderização do componente pai, o que pode ser apropriado em casos em que seja importante garantir a consistência do comportamento da função.
Em suma, o hook useCallback
é uma ferramenta valiosa para garantir a eficiência e otimização de aplicações React.
Top comments (0)