Promises como props para um componente do React usando typescript

É comum no desenvolvimento web ter que fazer chamadas para um servidor para carregar determinado conteúdo. Texto, imagens, vídeos… O javascript tem o recurso de Promises, que é bastante útil nestes casos. Nesse artigo vou expor uma abordagem para lidar com Promises e Componentes do React (com typescript).

Imagine que você tem um componente que recebe como props um array de urls de imagens e faz qualquer coisa com elas, algo do tipo

Esse componente pode funcionar perfeitamente, mas ele é preparado para lidar com um array de strings. E se você tivesse que pegar esse array de um servidor? Bom você poderia usar o useState para contornar a chamada.

Tudo bem, não parece tão ruim. Não mudou muuuita coisa. Mas agora seu componente precisa dessas promises. E pior, ele tem sideEffects, nem é um componente puro mais.

Restaurando a pureza

E se pudéssemos apenas transformar o nosso componente original em um outro igualzinho mas que aceita uma Promise contendo um array de strings?

Em outras palavras, se eu tenho um componente com props do tipo T, será que não há uma forma de transformá-lo em um que aceite props do tipo Promise<T>?

Para construir algo desse tipo podemos criar uma função do tipo

Algo muito bom do typescript é que ele nos permite pensar em alto nível sobre o que queremos fazer, sem ter que completar a implementação primeiro. Bom, isso é justamente o que precisamos. A função recebe um componente qualquer e retorna um outro que recebe as mesmas props, mas involucradas numa Promise. Só que tem um problema com isso, para passarmos props pra um componente do JSX, precisamos que elas tenham nome. Não tem como simplesmente passar Promise<string[]> pra um componente, ela precisa ter um nome, então falta envolvê-la num objeto.

Ok, agora ela funciona.

Implementação

Enquanto a promise não resolve, precisamos mostrar algo, você pode até implementar um valor de fallback personalizado, mas neste caso, retornarmos apenas uma div vazia.

Se observarmos bem, essa função faz exatamente o que faríamos para resolver cada caso individual, mas ela generaliza para todos os casos de transformação de um componente. E como poderíamos usar esse componente? Da seguinte maneira

PDisplay recebe todas as props de verdade em pProps, que é a prop de mentira. Enquanto a promise não resolve, ele mostra na tela a div vazia, assim que ela resolve, ele mostra o componente normal como seria antes.