Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

72
Vistas
how to prevent re-rendering components with redux

How to prevent component re-rendering, when i have an hierarchical array of objects (array of objects) using redux dispatching and memo for example i have like this list of list of components like

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

i used redux to update components values inside my Elements array using dispatch but the performance downgrades because of many re-rendering, i tried with memo to prevent re rendering but it also updates the entire Elements array because i used 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) 

here the code how i redner my compoents

 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>
  }

it works when i used a flat array as presented in the tutorial https://redux.js.org/tutorials/fundamentals/part-5-ui-react but not for hierarchical one, because i should use the "name" to define which subelement i'm updating, is there any strategy to solve this problem? ps: the code is just for clarification,

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Rather than memo you could try useMemo:

  const ImportedComponent = (props) => {

    const LoadableComponent = useMemo(() => {
      return loadable(() => import("../lib" + props.compName));
    },[props.compName]);
   
    ...

memo only helps when there's lots of re-renders with the same props, which it doesn't appear you have.

That's a complete shot in the dark, though. Can you post a link to a stackblitz, maybe? It'd be nice to see more of your code in context.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda