rendezirações desnecessárias no react

[Hermes Vitor 0]

Estou fazendo minha primeira grande aplicação em react, e estou com um problema onde TODOS meus componentes estão sendo renderizados desnecessariamente, causando trava na UI por 1 ou 2 segundos.

Tenho 2 grandes problemas no momento:

 

 1. Estou renderizando uma lista com varios componentes, essa lista possui um checkbox individual e um checkbox geral para selecionar a lista inteira. Ao selecionar a lista inteira, vejo que a ui trava por um tempo (nesse tempo ela esta renderiznado todos os componentes novamente)
 2. Ao buscar mais itens para a lista, a UI tambe trava por um tempo, acredito que ele esteja renderizando novamente os componentes da lista que ja estavam renderizados, mais os novos itens que foram buscados.

 

Eu estou usando a context API para fazer algumas chamadas HTTP e buscar todas as informações que preciso, e salvando elas em um estado. Depois estou iterando esse estado para renderiar as informações. Quando busco mais itens para a lista, estou dando um push nesse array de estado ja existente.

Dentro do meu componente de lista, estou usando useMemo para tentar bloquear essas renderizações desnecessárias, porém não parece estar funcionando.

 

```javascript
    const memoizedCardBaseInfo = useMemo(() => {
        return (
            <CatalogCardBaseInfo
                response={response}
                tags={tags}
                checkCard={checkCard}
                checkedAll={checkedAll}
                singleChecked={singleChecked}
                setSingleChecked={setSingleChecked}
                setCheckedAll={setCheckedAll}
                indexRef={indexRef}
            />
        );
    }, [singleChecked, checkedAll]);

    const memoizedCatalogChartGroup = useMemo(() => <CatalogCardChartGroup response={response} />, [response]);

    const memoizedCatalogCardMktpExpd = useMemo(() => <CatalogCardMktpExpd response={response} />, [response]);
```

O que estou fazendo de errado aqui ? Como faço para bloquear renderizações desnecessárias ?