useMemoized - um upgrade do useMemo para o React

Olá, tudo bem? Esse é o meu primeiro post aqui no TabNews, e eu gostaria de compartilhar com vocês um pacote que eu publiquei ontem no npm, o use-memoized!

Como eu disse no título, o propósito desse pacote é fornecer um hook que eu criei para ser usado de forma simples, seguindo o mesmo padrão de hooks do React, e que possa cachear o resultado de uma função custosa para evitar que ela seja chamada novamente quando a lista de dependência for igual à um valor já usado préviamente.

Como esse hook se diferencia do useMemo?

O useMemo só cachea o último resultado dessa função, de forma que se a lista de dependências for alterada para um valor já usado antes, o useMemo não vai aproveitar o resultado antigo, e a função será executada novamente.

Já o useMemoized cachea todos os resultados antigos baseados na lista de dependências, o que pode otimizar bastante quando você tem um conjunto limitado de parâmetros que fiquem repetindo e pode reaproveitar os resultado já calculados anteriormente. Por exemplo, se o resultado for baseado em um simples booleano que fica alternando entre true e false, ou for baseado em um valor de um menu que o usuário possa ficar alternando.

E essa é toda a diferença, eu construi o hook para ser utilizado da mesma maneira que você utilizaria o useMemo, mas com a vantagem de cachear todos os valores retornados pela função ao invés de só o último.

Exemplo

A seguir, um simples exemplo de como esse hook poderia ser usado para manter em cache um relatório pesado de algum setor gerado a partir de dois parâmetros:

import { useState } from 'react'
import useMemoized from 'use-memoized'

export default function ReportsWrapper() {
    const [sector, setSector] = useState('sales')
    const [detailed, setDetailed] = useState(false)
    
    const report = useMemoized(() => <Report sector={sector} detailed={detailed} />),
        [sector, detailed])
    
    return <div>
        {/* um select para o setor e uma checkbox para indicar se o relatório deve ser detalhado */}
        {report}
    </div>
}

Considerações finais

Essa idéia me surgiu enquanto eu estava vendo pontos que poderiam ser otimizados no código do meu trabalho, e ela é baseada no que eu já vi sobre programação dinâmica. Além disso, a parte de pegar uma função e criar uma versão cacheada para ela, eu me baseei neste artigo, e adaptei ela para persistir o cache entre os re-renders do React, usando o próprio useMemo, e, como disse antes, para a forma de utilizá-la ser idêntica ao useMemo para não ser necessário nenhuma ou pouca adaptação para usá-lo no lugar do useMemo.

Por fim, devo dizer que, pelo typescript, restringi a os tipos aceitos na lista de dependências do hooks para string, number e boolean, pois eu usei, por simplicidade, o método toString na lista para usar como chave para o cacheamento. Como primeira melhoria, vou pensar em outras formas de criar essa chave para tentar deixar mais abrangente.

Espero que gostem dele e que ele possa ser útil para vocês, também ficarei feliz em receber dicas e sugestões de como poderia melhorá-lo!