Introdução ao React useCallBack()

Ao criar um site usando o React, é importante considerar a rapidez com que ele carrega e a rapidez com que os usuários podem interagir com ele. Uma maneira de tornar um site React mais rápido é impedir que ele faça um trabalho desnecessário, como renderizar novamente partes da página que não foram alteradas.

A funçãouseCallback() no React nos ajuda a conseguir isso lembrando as funções que definimos e apenas as recriando quando necessário.Isso pode tornar o site mais rápido e responsivo para os usuários. React é a biblioteca JavaScript front-end mais popular, de acordo com uma pesquisa Stack Overflow no mesmo ano, sugerindo que useCallback() provavelmente é amplamente utilizado na indústria.

Neste artigo, explicaremos o que é useCallBack() no React e como usá-lo em nosso código React para melhorar o desempenho.

O que é useCallBack no React?

useCallback() é uma função de gancho fornecida pelo React que é usada para memorizar uma função. Em outras palavras, ajuda a otimizar o desempenho de um componente evitando a re-renderização indesejada.

No React, quando o estado ou prop de um componente muda, o componente é renderizado novamente para refletir os valores atualizados. Esse processo é computacionalmente caro e pode diminuir o desempenho do aplicativo se manuseado incorretamente. É aqui que useCallback() é útil.

Com useCallback(), os usuários podem memorizar uma função, o que significa que ela só é redefinida quando suas dependências mudam. Isso evita a nova renderização desnecessária de componentes, otimizando assim o desempenho do aplicativo.

Aqui está um exemplo -

const memoizedCallback = useCallback(

() => {

fazerAlgo(a, b);

},

[a, b],

);

Embora começar com o React por meio de tutoriais seja uma ótima maneira, seguir um curso dinâmico para começar o desenvolvimento pode ajudá-lo significativamente a atualizar suas habilidades. Confira o curso de Pós-Graduação Executiva em Desenvolvimento de Software – Especialização em Desenvolvimento Full Stack do upGrad ao kickstart!

Vantagens de usar useCallBack()

Aqui estão algumas vantagens de usar React useCallBack() –

• useCallback() pode ajudar os aplicativos React a serem executados mais rapidamente, evitando atualizações desnecessárias de componentes.
• Se um componente busca muitos dados e os mostra como um gráfico, ele pode se beneficiar de useCallback().
• Se o componente pai do gráfico for atualizado, mas as alterações não afetarem o gráfico, não será necessário atualizá-lo e buscar os dados novamente.
• Usando useCallback() para memorizar a função que busca os dados, podemos evitar atualizações desnecessárias e tornar o aplicativo mais rápido e suave.
• Essa otimização pode melhorar a experiência do usuário, pois o aplicativo funcionará de forma mais rápida e eficiente.

Confiraos cursos de desenvolvimento de software da upGrad para se aprimorar.

Sintaxe e parâmetros de useCallBack()

const memoizedCallback = useCallback(

() => {

faça alguma coisa();

},

[dependência1, dependência2]

);

No exemplo, o gancho useCallback() memoriza a função doSomething(), o que significa que ele armazena em cache a versão criada anteriormente. A função em cache será usada apenas em renderizações subsequentes, a menos que o valor dedependency1 ou dependency2seja alterado.

Se qualquer uma dessas dependências for alterada, uma nova versão da funçãodoSomething() será criada e a versão em cache será substituída pela nova.Isso ajuda a otimizar o desempenho do aplicativo, evitando criações e renderizações desnecessárias de funções.

Diferença entre useMemo() e useCallBack()

useCallback e useMemo são React Hooks que podem melhorar o desempenho de um aplicativo React memorizando valores. Ambos os ganchos recebem uma função como argumento e retornam uma versão memorizada dessa função.

Aqui está a diferença entre os dois:

Cenários quando usar useCallBack()

Aqui estão os cenários em que useCallBack() pode ser usado –

Otimização de Componentes Filhos

useCallback React otimiza os componentes filhos que dependem da igualdade de referência para evitar renderizações desnecessárias, especialmente ao passar callbacks para esses componentes filhos.

Evitando renderizações desnecessárias

React useCallback é particularmente útil quando você tem um componente com um elemento filho que é renderizado repetidamente sem precisar dele. Você pode passar uma função de retorno de chamada e uma matriz de dependência para useCallback para evitar renderizações desnecessárias.

Use sua chance de entender a função useCallBack() em detalhes com a ajuda do curso Full Stack Software Development Bootcamp da upGrad.

Explore nossos cursos populares de engenharia de software

Exemplos de useCallBack()

Aqui estão alguns exemplos de como implementar o hook useCallBack().

useCallBack Exemplo 1

Quando um componente pai passa uma função como um suporte para um componente filho, a renderização frequente do pai pode fazer com que o componente filho seja renderizado novamente desnecessariamente. Nesses casos, usar useCallback para memorizar a função pode ajudar a evitar essas novas renderizações desnecessárias.

import React, { useCallback } from 'react';

função ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Botão clicado');

}, []);

retornar (

<ChildComponent onClick={handleButtonClick} />

);

}

função ChildComponent({ onClick }) {

retornar (

<button onClick={onClick}>Clique em mim</button>

);

}

useCallBack Exemplo 2

Suponha que você tenha uma função que executa cálculos complexos em um grande conjunto de dados. Se essa função for chamada com frequência e demorar muito para ser executada, pode causar problemas de desempenho em seu aplicativo. Nesse cenário, você pode usar useCallback para memorizar a função e evitar a reexecução desnecessária da computação.

import React, { useState, useCallback } from 'react';

função ParentComponent() {

const [dados, setData] = useState([]);

const processData = useCallback(() => {

constprocessadosData = “Dados processados”;

retornar dadosprocessados;

}, [dados]);

retornar (

<ChildComponent processData={processData} />

);

}

função ChildComponent({ processData }) {

const resultado = processData();

retornar (

<div>{resultado}</div>

);

}

Otimização de desempenho do React usando useCallBack()

Um gancho useCallback é uma ferramenta poderosa no React que permite memorizar uma função, garantindo que ela seja refeita apenas quando uma de suas dependências for alterada. Isso é particularmente benéfico para funções de alto desempenho que são chamadas com frequência. Confira o exemplo abaixo para ver como ele pode ser usado –

import { useState, useEffect } de 'reagir';

função Aplicativo() {

const [palavra, setWord] = useState(“Bob”);

const say = () => console.log(`Sua palavra é: ${palavra}`);

useEffect(() => {

dizer();

}, [dizer]);

return <div>Bem-vindo!</div>;

}

O exemplo demonstra que o gancho useEffect depende da função say, o que significa que ele só deve ser acionado com uma alteração na função. No entanto, devido às verificações de igualdade referencial do React, a função dita sempre será avaliada como verdadeira, mesmo no caso de nenhuma alteração real, resultando em renderizações desnecessárias.

O retorno de chamada useEffect será usado em cada renderização, o que não é adequado para desempenho. Uma maneira de resolver isso é realocar a função para o bloco useEffect, mas isso não seria uma solução ideal, pois você não seria capaz de usar a função em nenhum outro lugar. Confira este exemplo abaixo –

import React, { useState, useEffect } from 'react';

função Aplicativo() {

const [palavra, setWord] = useState(“Bob”);

const say = () => console.log(`Sua palavra é: ${palavra}`);

useEffect(() => {

dizer();

}, [dizer]);

return <div>Bem-vindo!</div>;

}

Outra solução é implementar o gancho useCallback encapsulando a função. É essencial lembrar que a função useCallback requer um array de dependência assim como useEffect. Se a função receber alguma variável, os usuários podem passá-la com o array; ou então deixe-o vazio. Aqui, como a função say depende da variável word, nós a incluímos no array.

importar {useState, useEffect,useCallback} de 'reagir'

função App(){

const [palavra,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`Sua palavra é: ${palavra}`),[palavra])

useEffect(()=>{

dizer()

},[dizer])

return <div>Bem-vindo!</div>

}

Quando não usar useCallBack()

Embora useCallback() seja uma ferramenta útil para otimizar o desempenho em determinados cenários, também há momentos em que é desnecessário ou até mesmo prejudicial. Aqui estão alguns exemplos de quando não usar useCallback():

• Quando a função é passada como prop já é uma função pura que não depende de um estado externo.
• Quando a função é passada como um prop, ela não está causando nenhum problema de desempenho e não está sendo chamada excessivamente.
• Quando a função é passada como um suporte, ela é usada em vários lugares e precisa ser recriada a cada vez para refletir diferentes comportamentos ou dependências.
• Quando a função é passada como um prop faz parte de uma pequena árvore de componentes, o ganho de desempenho de useCallback() seria insignificante.
• Quando a função é passada como um prop é usado como um manipulador de eventos e é chamado apenas uma vez.

Nesses casos, usar useCallback() pode realmente diminuir o desempenho devido à sobrecarga de criar e manter o retorno de chamada memorizado. É importante considerar cada caso de uso cuidadosamente e pesar os benefícios potenciais em relação aos custos potenciais antes de decidir se deve ou não usar useCallback().

Habilidades de desenvolvimento de software sob demanda

Conclusão

O uso de useCallback pode ser uma ferramenta poderosa para otimizar o desempenho do seu aplicativo React. Ao memorizar funções, reprocessamentos desnecessários podem ser evitados, levando a uma experiência de usuário mais suave e eficiente. No entanto, é importante usar useCallback criteriosamente e entender os cenários quando for mais eficaz.

O upGrad oferece um programa de Mestrado em Ciência da Computação que fornece uma educação abrangente em ciência da computação com foco em habilidades relevantes para o setor. Este programa é para qualquer indivíduo mais novo ou mais experiente aprimorar suas habilidades de desenvolvimento de software. Com este curso, os alunos estarão mais do que prontos para atualizar suas carreiras no mundo real e se tornarem especialistas em seus campos aspirados.