Как заново отобразить вложенное текстовое значение в списке компонентов в React Hooks?

Question

Я хочу улучшить производительность моего цикла рендеринга. Предположим следующее:

Компоненты

У меня есть два компонента, родительский компонент и дочерний компонент. Я передаю два подпорки от родительского компонента к дочернему компоненту (propA и propB). Дочерний компонент заполняется списком наборов других компонентов, например:

<View>
    {/*SET 1/*}
    <ComponentA>
        <Component B />
        <Component C />
        <Text>Some Text from data</Text>
        <Component D />
    </ ComponentA>

    {/*SET 2/*}
    <ComponentA>
        <Component B />
        <Component C />
        <Text>Some Text from data</Text>
        <Component D />
    </ ComponentA>

    {/*SET 3/*}
    <ComponentA>...
...
</ View>

Количество наборов, включенных в дочерний компонент, зависит от количества записей данных, которые извлекаются из хранилища избыточных данных и обновляется диспетчером:

const curData = useSelector(state => state.userData);

const dispatch = useDispatch();

const updateData = useCallback((id) => {
    dispatch(updateAttr(id))
}, [dispatch]);

Каждый набор компонентов хранится в массиве, который создается путем перебора данных и управляется с помощью ловушки useState:

const [componentSets, setComponentSets] = useState([]);

useEffect(() => {
    const newComponentSets = [];

    for (const [i, v] of curData.entries()) {

        updateData(v.id)

        newComponentSets.push(
            <ComponentA 
                attr1={} 
                attr2={} ...>

                <Component B 
                    attr1={} 
                    attr2={} .../>

                <Component C 
                    attr1={} 
                    attr2={} ... />

                <Text 
                    attr1={} 
                    attr2={} ...>Some Text from data</Text>

                <Component D 
                    attr1={} 
                    attr2={} ... />
            </ ComponentA>
        )
    }

    setComponentSets(newComponentSets);
}, [props.propA, props.propB])

Это затем включается в оператор return дочернего компонента:

return(
    <View>    
        {componentSets.map(x => x)}
    </View>
)

Render Logi c

В настоящее время, как вы можете видеть, я перерисовываю весь дочерний элемент компонент всякий раз, когда props.propA или props.propB изменяется. Однако в случае props.propA только текстовое значение внутри компонента <Text> должно измениться, а остальное не должно быть затронуто. В случае изменений в props.propB весь набор должен обновляться на основе атрибута id данных.

Вопрос

Я пытался использовать хук useMemo() для хранения в нем текстового компонента, но не смог добиться того, что мне было нужно.

Как я могу получить логику рендеринга c, описанную выше?