React unnecessary re-rendering

Question

I’m doing my first major application in Act, and I’m having a problem where ALL my components are being rendered unnecessarily, causing the UI to crash for 1 or 2 seconds.

I got two big problems right now:

1. I am rendering a list with several components, this list has an individual checkbox and a general checkbox to select the entire list. When selecting the entire list, I see that ui hangs for a while (at that time it is rendered all components again)
2. When searching for more items for the list, the UI also hangs for a while, I believe it is rendering again the components of the list that were already rendered, plus the new items that were searched.

I’m using the context API to make some HTTP calls and fetch all the information I need, and saving it in one state. Then I’m iterating this state to render the information. When I search for more items for the list, I’m pushing this existing status array.

Inside my list component, I’m using useMemo to try to block these unnecessary renderings, but it doesn’t seem to be working.

    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]);

What am I doing wrong here ? How do I block unnecessary renderings ?