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 ?
