React Hooks Integrados

State Hooks

State permite que um componente “lembre-se” de informações como o input do usuário. Por exemplo, um componente de formulário pode usar o state para armazenar o valor do input, enquanto um componente de galeria de imagens pode usar o state para armazenar o índice da imagem selecionada.

Para adicionar state a um componente, use um destes Hooks:

• useState declara uma variável de state que pode ser atualizada diretamente.
• useReducer declara uma variável de state com a lógica de atualização dentro de uma função reducer.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Context Hooks

Context permite que um componente receba informações de pais distantes sem passá-las como props. Por exemplo, o componente na raiz do seu aplicativo pode passar o tema atual da UI do usuário para todos os componentes abaixo, independentemente da profundidade.

• useContext lê e se inscreve em um contexto.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Ref Hooks

Refs permitem que um componente mantenha algumas informações que não são usadas para renderização, como um nó do DOM ou um ID de tempo limite. Ao contrário do state, a atualização de uma ref não renderiza novamente o componente. Refs são uma “saída de emergência” do paradigma React. Elas são úteis quando você precisa trabalhar com sistemas não React, como as APIs de navegador integradas.

• useRef declara uma ref. Você pode armazenar qualquer valor nele, mas na maioria das vezes ele é usado para armazenar um nó do DOM.
• useImperativeHandle permite que você personalize a ref exposta pelo seu componente. Isso é raramente usado.

function Form() {
  const inputRef = useRef(null);
  // ...

Effect Hooks

Effects permitem que um componente se conecte e sincronize com sistemas externos. Isso inclui lidar com rede, DOM do navegador, animações, widgets escritos usando uma biblioteca de UI diferente e outros códigos que não sejam do React.

• useEffect conecta um componente a um sistema externo.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Effects são uma “saída de emergência” do paradigma React. Não use Effects para orquestrar o fluxo de dados de seu aplicativo. Se você não estiver interagindo com um sistema externo, talvez não precise de um Effect.

Há duas variações raramente usadas de useEffect com diferenças de tempo:

• useLayoutEffect é acionado antes que o navegador repinte a tela. Você pode medir o layout aqui.
• useInsertionEffect é acionado antes que o React faça alterações no DOM. As bibliotecas podem inserir CSS dinâmico aqui.

Hooks de desempenho

Uma maneira comum de otimizar o desempenho de uma nova renderização é pular o trabalho desnecessário. Por exemplo, você pode dizer ao React para reutilizar um cálculo em cache ou para pular uma nova renderização se os dados não tiverem sido alterados desde a renderização anterior.

Para pular os cálculos e a renderização desnecessária, use um destes Hooks:

• useMemo permite que você armazene em cache o resultado de um cálculo caro.
• useCallback permite que você armazene em cache uma definição de função antes de passá-la para um componente otimizado.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Às vezes, não é possível pular a nova renderização porque a tela realmente precisa ser atualizada. Nesse caso, é possível melhorar o desempenho separando as atualizações de bloqueio que devem ser síncronas (como digitar em um input) das atualizações sem bloqueio que não precisam bloquear a interface do usuário (como atualizar um gráfico).

Para priorizar a renderização, use um destes Hooks:

• useTransition permite que você marque uma transição de state como não bloqueante e permita que outras atualizações a interrompam.
• useDeferredValue permite adiar a atualização de uma parte não crítica da UI e possibilita que outras partes sejam atualizadas primeiro.

Outros Hooks

Esses Hooks são úteis principalmente para autores de bibliotecas e não são comumente usados no código de aplicativos.

• useDebugValue permite que você personalize o rótulo que o React DevTools exibe para seu Hook personalizados.
• useId permite que um componente associe uma ID única a si mesmo. Normalmente usado com APIs de acessibilidade.
• useSyncExternalStore permite que um componente se inscreva em um armazenamento externo.

Seus próprios Hooks

Você também pode definir seus próprios Hooks personalizados como funções JavaScript.