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
Post a Comment