Sem categoria

O que é o useCallback?

atualizado em

O useCallback é um hook do React que memoiza funções de callback passadas como props, garantindo que elas não sejam recriadas a cada re-renderização. Usar o useCallback corretamente pode melhorar o desempenho do nosso aplicativo.

Como usar o useCallback no React Native?

Importe o useCallback da biblioteca React:

import { useCallback } from 'react';

Utilize o useCallback em seu componente funcional:

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

function MyComponent() {
  const [count, setCount] = useState(0);

  // Memoiza a função para evitar recriação desnecessária
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const handleDecrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return (
    <div className="App">
      <button onClick={handleIncrement}>Incrementar</button>
      <button onClick={handleDecrement}>Decrementar</button>
      <h2>{count}</h2>
    </div>
  );
}

export default MyComponent;

No exemplo acima, o handleIncrement e o handleDecrement são memoizados usando o useCallback. Eles só serão recriados se a dependência count mudar.

    Conclusão

    O useCallback é uma ferramenta poderosa para otimizar o desempenho do seu aplicativo React Native. Lembre-se de usá-lo quando você tiver funções de callback que precisam ser passadas como props para componentes filhos. Espero que isso tenha ajudado! 😊

    Referências:

    1. Full Guide to React Hooks1
    2. React Native useCallback2
    3. Demystifying React Hooks: useCallback3
    4. GeeksforGeeks: React useCallback Hook4