React Native - Hooks

Os Hooks são uma adição ao React, introduzidos na versão 16.8, que permitem usar estado e outros recursos do React sem escrever uma classe. Eles foram criados para resolver uma variedade de problemas complexos que os desenvolvedores enfrentavam com as classes em React, como a reutilização de lógica de estado entre componentes, complexidade na manutenção de componentes grandes, e dificuldades com o comportamento dos this em JavaScript.

Utilização dos Hooks

Os Hooks são usados principalmente para permitir que componentes funcionais tenham acesso a recursos que antes estavam disponíveis apenas em componentes de classe. Isso inclui a capacidade de gerenciar o estado local, executar efeitos colaterais em resposta a mudanças de estado ou props, entre outros. A utilização dos Hooks torna o código mais limpo, modular, reutilizável e organizado.

Hooks mais Utilizados e Suas Funções

useState

Este é talvez o Hook mais fundamental e é utilizado para adicionar o estado local a componentes funcionais. Antes dos Hooks, o estado só podia ser usado em componentes de classe. useState retorna um par de valores: o estado atual e uma função que permite atualizar esse estado.

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

useEffect

useEffect substitui os métodos de ciclo de vida em componentes de classe como componentDidMount, componentDidUpdate, e componentWillUnmount. Ele é usado para executar efeitos colaterais em componentes funcionais, como chamadas de API, subscrições, ou manualmente manipular o DOM.

useEffect(() => {
  document.title = `Você clicou ${count} vezes`;
}, [count]); // O efeito só é executado quando o `count` muda.

useContext

Este Hook permite a subscrição ao contexto React para componentes funcionais. Ele permite que você utilize o React Context para propagar dados de forma eficiente através da árvore de componentes sem ter que passar props manualmente em cada nível.

const value = useContext(MyContext);

useMemo e useCallback

useMemo é usado para memorizar valores caros de serem calculados. Ele recalcula o valor memorizado apenas quando uma das dependências mudou, ajudando na otimização de performance em operações pesadas.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback, por outro lado, memoriza funções. Ele garante que funções não sejam recriadas a cada renderização a menos que realmente necessário, o que pode ser útil para otimizar o desempenho de componentes que dependem da igualdade de referência para prevenir renderizações desnecessárias.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

Embora os Hooks sejam uma funcionalidade do React e não específicos do React Native, eles são igualmente úteis e eficazes no desenvolvimento de aplicativos móveis. Eles ajudam a manter a consistência do código entre o React para a web e o React Native, facilitando a manutenção e potencial reutilização de código entre plataformas. Além disso, os Hooks facilitam o gerenciamento de estados e efeitos em componentes funcionais, que é uma prática comum no desenvolvimento moderno de aplicativos com React Native.

Os Hooks simplificam significativamente os componentes funcionais e são fundamentais para escrever aplicativos modernos em React e React Native, permitindo aos desenvolvedores criar interfaces mais limpas, mais rápidas e mais reativas.

React Native e os componentes padrões

O React Native vem com uma série de componentes básicos que são utilizados para construir interfaces de usuário em aplicativos móveis. Estes componentes são análogos aos elementos HTML em desenvolvimento web, mas são projetados especificamente para ambientes móveis. Aqui está uma lista dos componentes mais comuns que você encontra no React Native:

Componentes Básicos

• View: O componente fundamental para construir UIs, similar à div no HTML.
• Text: Um componente para exibir texto.
• Image: Usado para exibir diferentes tipos de imagens.
• ScrollView: Um contêiner que suporta rolagem.
• TextInput: Permite que os usuários digitem texto em um app.

Componentes de Interface com Usuário

• Button: Um botão simples que executa uma ação quando tocado.
• Switch: Um componente de entrada que oferece um valor booleano.
• TouchableOpacity: Um wrapper para tornar qualquer componente tocável; diminui a opacidade do componente quando tocado.
• TouchableHighlight: Semelhante ao TouchableOpacity, mas adiciona um fundo visível sob o componente filho em vez de alterar a opacidade.
• TouchableWithoutFeedback: Um contêiner que pode detectar um toque sem feedback visual.
• TouchableNativeFeedback: Oferece um toque que mostra feedback nativo do Android em toques.

Componentes de Lista

• FlatList: Uma maneira eficiente de renderizar listas simples e longas.
• SectionList: Como o FlatList, mas para listas com seções agrupadas.

Componentes de Navegação

Estes não são fornecidos diretamente pelo React Native, mas são frequentemente utilizados através de bibliotecas como React Navigation.

Outros Componentes e APIs

• ActivityIndicator: Exibe um indicador de carregamento circular.
• Modal: Um componente para apresentar conteúdo acima de um fundo envolvente.
• Pressable: Um componente que detecta vários tipos de interações de toque.
• RefreshControl: Um componente utilizado dentro de ScrollView ou outro componente de lista para adicionar uma funcionalidade de "pull to refresh".
• SafeAreaView: Ajusta seu conteúdo dentro dos limites de uma área segura para evitar entalhes e outros elementos da tela