javascript - Removing elements of array causes multiple re-renders -


i have mobx observable array, , want remove multiple elements lodash's remove. causes re-render every element in array.

const array = observable([1,2,3,4,5,1]);  const app = observer(() => {   console.log('rendering...');   return (     <div>       { array.map(e => <div> {e} </div>)}     </div>   ); });  reactdom.render(   <app />,   document.getelementbyid('app') ); 

if try remove every occurrence of 1, rendering... logged once every element:

_.remove(array, num => num === 1); > "rendering..." > "rendering..." > "rendering..." > "rendering..." > "rendering..." > "rendering..." 

how can make re-renders once?

the api mobx looks vanilla javascript, every alteration of observable array causes synchronous update of observers. mitigate this, wrap alteration in transaction:

transaction(() => _.remove(array, num => num === 1)); > "rendering..." 

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -