Hooks permitem que componentes de função possam acessar os estados em outros components do React.

Regras dos hooks

Não se chama Hooks dentro de loops, condições ou funções aninhandas. Sempre use Hooks no top level nos components de funções. Seguindo essas regras, você tem certeza que os hooks serão chamados na ordem certa em cada renderização de componentes.

useState

O useState declara uma variável state. Nessa variável pode ser usada qualquer nome, é uma maneira de preservar alguns valores entre as chamadas das funções. Normalmente variáveis "desaparecem" quando a função sai, mas variáveis de state são preservadas pelo React.

import React, { useState } from 'react';

	function Example() {
	  const [count, setCount] = useState(0);
 
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
         Click me
        </button>
      </div>
    );
  }

//declaramos a o state com o valor inicial de 0
//no button usamos a propriedade onClick() para setar o contador atribuindo
//o valor inicial mais + 1
//ou seja, pegaremos o valor 0 e sempre que clicarmos no button ira atribuir
// 0 + 1 = 1 / 1 + 1 = 2 / 2 + 1 = 3 e assim por diante. 

useEffect

O useEffect a gente diz oq o componente precisa fazer algo apenas quando renderizar, o react irá lembrar da função que você passou, chamando ela depois de renderizar tudo.

O useEffect permite executar uma função em alguns momentos durante o ciclo de vida do componente

PS: o useEffect ele renderiza depois de toda renderização.

Exemplo da documentação do React

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

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

  useEffect(() => {
	// Faz algo quando o count for atualizado
    document.title = `Você clicou ${count} vezes`;
  });

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={() => setCount(count + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

Um exemplo prático usando useStates de forma simples

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

export default function App() {
  const [nome, setNome] = useState('');
  const [input, setInput] = useState('')
	//Criei duas const com valores vazios

  function entrar(){
    if(input === ''){
      alert('Digite seu Nome');
      return;
    }
    setNome(input)
		//Seta oq tá dentro do input
  }

  return (
    <View style={styles.container}>

      <TextInput style={styles.input} 
        placeholder="digite o nome" 
        onChange={(text) => setInput(text)}

      />

      <Button onPress={entrar} />

      <Text>{nome}</Text>
    </View>
  );
}

useRef

Quando atualizamos um componente usando o useState, necessariamente ele atualiza o componente de maneira completa, já o useMemo, ele não necessariamente atualiza o componente.

import { useRef } from 'react'

export default function() {
  // Passo um valor inicial para o estado
  const counterRef = useRef(0)

  function increaseCounter() {
	//Pego o valor inicial e somo mais um, na realidade apenas uma troca
    counterRef.current = counterRef.current + 1;
  }

  function showCounter() {
    alert(`o button foi clicado ${counterRef} vezes `)
  }
  
  return (
  	<div>
	    <button onClick={increaseCounter}>Clicar</button>
	    <button onClick={showCounter}>Mostra quantas vezes foi clicado</button>
    </div>
  )
}

Criando seus próprios Hooks

Hooks personalizados permitem que a lógica de um component seja reutilizado por funções

Exemplo de um hook customizado

A melhor forma para nomear um hook customizado começamos com “use” por exemplos useFriendStatus

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}