Cómo evitar que se vuelvan a renderizar los componentes, cuando tengo una matriz jerárquica de objetos (matriz de objetos) usando despacho redux y memo, por ejemplo, tengo esta lista de lista de componentes como

 Elements =[ // an array in store.state variable {name='a', subEelemets:[ {name:'a-a', components:[ { name:'aa-1', component:'TextFiled', value:'default value...' }, ] }, ] }, ]

Utilicé redux para actualizar los valores de los componentes dentro de mi matriz de Elementos usando el envío, pero el rendimiento se degradó debido a muchas representaciones, probé con memo para evitar la representación, pero también actualiza toda la matriz de Elementos porque usé useSelector,

 const ImportedComponent = memo((props) => { const LoadableComponent = loadable(() => import("../lib" + props.compName)) ); return ( <LoadableComponent {...props} id={props.id} />)},(a,b)=>a.id===b.id?true:false)

aqui el codigo de como redeno mis componentes

 const selectTodoIds = state => state.components.map((todo,index) => todo) const updateComp = () => { const Components = useSelector(selectCompsIds, shallowEqual) const renderedListItems = Components.map((CompId) => <ImportedComponent key={CompId} elementID={CompId} /> ) return <ul className="todo-list">{renderedListItems}</ul> }

funciona cuando usé una matriz plana como se presenta en el tutorial https://redux.js.org/tutorials/fundamentals/part-5-ui-react pero no para uno jerárquico, porque debo usar el "nombre" para definir qué subelemento estoy actualizando, ¿hay alguna estrategia para resolver este problema? pd: el código es solo para aclarar,