rendezirações desnecessárias no react

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.

	    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 ?