React Native: custom hooks

1. Visão geral

Neste material, vamos estudar sobre a criação de hooks próprios, visando a implementação de regras de negócio que podem se repetir em diferentes partes da aplicação. A motivação é a mesma que utilizamos quando criamos funções: promover reusabilidade, manutenabilidade e flexibilidade. Quando utilizamos Hooks, estamos optando por seguir tais princípios aderindo a convenções do React.

A primeira aplicação que criaremos exibe um simples contador. Veja.

A aplicação do contador.

O que você vai aprender

• O que é um custom hook e por que usá-lo
• A convenção do prefixo use no nome dos hooks
• Como encapsular uma variável de estado e suas funções num hook próprio
• Como importar e usar o hook num componente

O que você vai precisar

• Node.js e VS Code instalados
• Um navegador (para testar com o Expo na web)
• Conhecer o hook useState (veja o codelab rn-lembretes)

2. Criando a aplicação

Comece criando a aplicação com

Terminal

npx create-expo-app -t expo-template-blank-typescript custom-hooks

Uma pasta chamada custom-hooks terá sido criada para você. Use

Terminal

code custom-hooks

para abrir uma instância do VS Code vinculada a ela. No VS Code, clique Terminal >> New Terminal, obtendo um terminal interno. Como vamos testar a aplicação no navegador num primeiro momento, instale as dependências para tal com

Terminal do VS Code

npx expo install react-native-web react-dom @expo/metro-runtime

Coloque a aplicação para funcionar com

Terminal do VS Code

npm start

No terminal, aperte w para vê-la funcionar no navegador. Se necessário, abra o navegador manualmente e visite

http://localhost:8081/

Abra o arquivo App.tsx e ajuste seu conteúdo como a seguir.

App.tsx

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Nosso primeiro Custom hook</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

3. O hook useContador

Criaremos um custom hook que encapsula

• uma variável de estado que representa o valor do contador
• as funções de incremento, decremento e reinício

Para tal, crie uma pasta chamada hooks na raiz da aplicação. A seguir, crie um arquivo chamado useContador.ts nesta pasta. Observe.

A pasta hooks com o arquivo useContador.ts.

Veja a implementação do custom hook. Observe que se trata de uma função que, quando chamada, devolve um objeto contendo a variável de estado e as três funções de interesse.

hooks/useContador.ts

import { useState } from 'react'

export default (valorInicial: number = 0) => {
  const [contador, setContador] = useState(valorInicial)

  const incrementar = () => setContador(contador + 1)
  const decrementar = () => setContador(contador - 1)
  const reiniciar = () => setContador(valorInicial)

  return {contador, incrementar, decrementar, reiniciar}
}

4. Usando o hook no App

No arquivo App.tsx, importe e use o hook da seguinte forma.

App.tsx

import { StyleSheet, Text, View } from 'react-native';
import useContador from './hooks/useContador';

export default function App() {
  const { contador, incrementar, decrementar, reiniciar } = useContador(0)
  return (
...

No próximo passo, crie um componente para exibição do valor do contador.

App.tsx

export default function App() {
  const { contador, incrementar, decrementar, reiniciar } = useContador(0)
  return (
    <View style={styles.container}>
      <Text>Nosso primeiro Custom hook</Text>
      <View
        style={styles.principal}>
        <Text style={styles.numero}>{contador}</Text>
      </View>
    </View>
  );
}

Veja a estilização da aplicação.

App.tsx

import { StyleSheet, Text, View } from 'react-native';
import useContador from './hooks/useContador';

export default function App() {
  const { contador, incrementar, decrementar, reiniciar } = useContador(0)
  return (
    <View style={styles.container}>
      <Text>Nosso primeiro Custom hook</Text>
      <View
        style={styles.principal}>
        <Text style={styles.numero}>{contador}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  principal:{
    width: '80%',
  },
  numero: {
    fontSize: 48,
    marginBottom: 20,
    textAlign: 'center'
  }
});

5. Exercícios

1. Crie nova aplicação. Ela usa um custom hook para isolar a definição das operações de uma calculadora que faz soma, subtração, multiplicação e divisão. Utilize o custom hook em uma interface gráfica simples, que permite que o usuário realize as quatro operações.

Referências

• React Native. Learn once, write anywhere. 2025. Disponível em https://reactnative.dev/. Acesso em 2025.