Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

70
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!