ReactSmallTips — criando um hook para lidar com promises

Se você desenvolve em React/React native, provavelmente já teve que criar um componente para renderizar um conteúdo que vem de uma API. Nesses cenários é comum termos que pensar em uma lógica de controle de estado para renderizar na tela, por exemplo, um loading/squeleton até que a chamada da API conclua e por fim renderizar o conteúdo retornado ou um feedback erro ou retorno vazio. Conforme a aplicação cresce percebemos que esse padrão começa a se repetir em diferentes partes da aplicação. Algo como..

Hoje em dia já temos libs como — React Query; Redux toolkit (para quem usa Redux)— que facilitam um pouco lidar com cenários como esse. Mas se você quiser algo mais simples e sem precisar instalar mais uma lib, podemos modularizar esse padrão, separando-o em duas 2 partes: a lógica de estado e a lógica de renderização. Assim fica mais fácil reusa-las em vários locais na aplicação sem muito trabalho e duplicação de código. Para isso vamos criar um hook(usePromise) para reuso da lógica de estado e um componente(FallbackWrapper) para reuso da lógica de renderização

1. Crie o usePromise hook que será responsável por executar nossa promise e gerenciar/retornar os estados (status):

2. Crie o FallbackWrapper component que será responsável por tratar a nossa lógica de renderização, aplicando uma ideia de encapsulamento que mencionei no meu outro post (Renderização condicional encapsulada):

3. Agora vamos refatorar o MyComponent para usar o hook usePromise e o componente de renderização FallbackWrapper:

Note que reduzimos significamente o tamanho do nosso código além de deixa-lo mais legível e declarativo.

Separar a logica de estado (hook) da lógica de renderização (component), potencializa e flexibiliza o reuso em diferentes partes da aplicação. Como são independentes a agnósticos a contexto, o usePromise e FallbackWrapper podem ser usados em conjunto ou separados.

Muito importante! Observe que criamos nossa promise(loadDataPromise) usando o useCallback do React. Isso porque no hook usePromise devemos passar a promise como dependência para o useEffect. Dessa forma, conseguimos “falar” para o React quando nossa promise deve/não-deve disparar (dado as mudanças no array de dependências do useCallbak).

O resultado para os possíveis cenários.. Loading, Success, Error e Empty

Se você leu até aqui, agradeço e espero que essa dica contribua em seus projetos. Até a próxima..

Cheers!