Tutorial: Como criar hooks personalizados no React

Os hooks personalizados são uma maneira poderosa de reutilizar lógica em componentes do React. Eles permitem encapsular um comportamento específico em um hook, que pode ser facilmente compartilhado entre diferentes componentes.

Neste tutorial, vamos explorar como criar hooks personalizados no React passo a passo.

Passo 1: Criando o hook

Comece criando um novo arquivo para o seu hook personalizado. Vamos chamá-lo de useCustomHook.js. Dentro desse arquivo, importe o React e crie a função do hook com o prefixo "use" seguido do nome do seu hook.

Por exemplo:

import { useState, useEffect } from 'react';

const useCustomHook = () => {
  // Lógica do seu hook aqui
};

export default useCustomHook;

Passo 2: Definindo a lógica do hook

Agora é hora de definir a lógica do seu hook personalizado. Pense no que você deseja encapsular e reutilizar em diferentes componentes.

Vamos criar um exemplo simples de um hook que controla o estado de um contador:

import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  const [count, setCount] = useState(initialValue);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return {
    count,
    increment,
  };
};

export default useCustomHook;

Neste exemplo, o hook useCustomHook recebe um valor inicial para o contador e retorna o estado atual do contador e uma função para incrementar o contador.

Passo 3: Utilizando o hook em componentes

Agora que criamos o nosso hook personalizado, podemos utilizá-lo em nossos componentes. Importe o hook e chame-o dentro do componente da seguinte forma:

import React from 'react';
import useCustomHook from './useCustomHook';

const MyComponent = () => {
  const { count, increment } = useCustomHook(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default MyComponent;

Agora o nosso componente MyComponent está utilizando o hook personalizado useCustomHook para controlar o estado do contador.

Passo 4: Testando o hook personalizado

Execute a sua aplicação e verifique se o hook personalizado está funcionando corretamente. Você deve ver o contador sendo exibido na tela e o título do documento sendo atualizado conforme o contador é incrementado.

Conclusão

Criar hooks personalizados no React é uma forma poderosa de reutilizar lógica em componentes e manter o código mais organizado.

Neste tutorial, você aprendeu como criar um hook personalizado passo a passo. Lembre-se de que você pode criar hooks personalizados mais complexos para atender às necessidades específicas da sua aplicação.

Aproveite o poder dos hooks personalizados para criar componentes mais reutilizáveis e eficientes no React.

Referências:
React hooks