Olá, Cristian, tudo bem?
Primeiramente, é importante ressaltar que o uso de Hooks é uma ótima prática para separar a camada de renderização da camada de lógica em componentes do React. Isso ajuda a deixar o código mais organizado, reutilizável e facilita a manutenção no futuro. Agora, vamos abordar sua primeira pergunta. Se você não precisar utilizar um determinado Hook em outra tela, mas ainda desejar separar a camada de renderização da lógica, é possível adotar a mesma abordagem. Você pode criar um novo componente funcional e utilizar o Hook dentro dele.
Aqui está um exemplo básico de como isso pode ser feito:
import React, { useState, useEffect } from 'react';
function MeuComponente() {
const [estado, setEstado] = useState('');
useEffect(() => {
// Lógica do useEffect
// ...
return () => {
// Função de limpeza (opcional)
// ...
};
}, []);
return (
<div>
{/* Componente renderizado */}
{/* ... */}
</div>
);
}
export default MeuComponente;
Nesse exemplo, criamos um novo componente funcional chamado MeuComponente. Dentro dele, utilizamos o Hook useState para criar um estado chamado estado e a função setEstado para atualizar esse estado. Também utilizamos o Hook useEffect para realizar alguma lógica, como uma chamada de API, quando o componente é renderizado. O segundo argumento do useEffect é um array de dependências. Se você deixar esse array vazio, como no exemplo acima, o useEffect será executado apenas uma vez, quando o componente for montado. Isso pode ser útil se você não precisar de atualizações automáticas para esse Hook.
Agora, vamos abordar sua segunda pergunta sobre o uso da Context API. A Context API é uma opção viável quando você precisa compartilhar dados entre diferentes componentes em diferentes camadas. Se você precisar que um determinado estado seja acessível por vários componentes, a Context API pode ser uma solução prática.
No entanto, se você estiver apenas separando a camada de renderização da lógica em um único componente, não é necessário utilizar a Context API. Nesse caso, os Hooks são suficientes para manter o estado local e separar a lógica do componente.
Aqui está um exemplo que ilustra o uso da Context API quando há a necessidade de compartilhar dados entre componentes:
Eu espero que tenha ajudado e qualquer coisa estou por aqui
Bons estudos!
