配列の要素を削除すると、複数の再レンダリングが発生します

Question

私はMobX観測可能な配列を持っていますので、lodashのremoveで複数の要素を削除したいと考えています。これにより、配列内のすべての要素の再レンダリングが行われます。

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') 
); 

私は1のすべての発生を削除しようとすると、Rendering...は、すべての要素のために一度記録されます。

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

はどのように私はそれはそれは一度だけ再レンダリングすることができますか？

Answer 1

MobXのAPIは、バニラJavaScriptのように見えますが、観測可能な配列が変更されるたびに、すべてのオブザーバが同期的に更新されます。これを軽減するには、transactionの

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