Giter Club home page Giter Club logo

Comments (4)

staltz avatar staltz commented on August 16, 2024

I suppose you're talking about modifying items in the presence of many items (after "adding many items")? Related to this twitter discussion:
https://twitter.com/sudodoki/status/531188562746949632
@sudodoki

I did some digging into both React and MVI sides, and apparently it's true, React is performing much better and it seems to be all due to PureRenderMixin.

See this comment.

In both React and MVI implementations of this example, the whole set of elements is rerendered, but in React, PureRenderMixin has a smart check to avoid a diff calculation for the Item component. That doesn't exist in MVI/virtual-dom.

This is a good find, and it's not virtual-dom's fault because its responsibility is just diff and patch. PureRenderMixin works a bit higher in the architecture, close to "properties and state" of a React component. I'll think what could be done, but I'm open to suggestions.

from mvi-example.

staltz avatar staltz commented on August 16, 2024

I also filed an issue for virtual-dom: #113

I have one back-of-the-envelope idea: to attach the parent data (or React "property") to the VTree, and inside virtual-dom's diff algorithm, it could use that data instead of the whole VTree structure, as a quick diff check prior to the real diff. Maybe we could even use a hash of the data instead of the data itself.

from mvi-example.

staltz avatar staltz commented on August 16, 2024

Oh well, I'm just starting to figure out that virtual-dom (and mercury) has plenty of tricks for optimizing performance. This issue is very relevant for our demo.

In fact, it seems that the whole point of the React demo is to demonstrate performance gains with shouldComponentUpdate, because the title of the demo is "Demo 6: Top-Down Data Flow & shouldComponentUpdate".

It seems I chose the wrong demo for comparing MVI and React, because it was supposed to be a fight between React's PureRenderMixin and virtual-dom's optimizations, but there were no virtual-dom optimizations employed.

I'll get my head around virtual-dom optimization specifics and update this demo later.

from mvi-example.

Raynos avatar Raynos commented on August 16, 2024

Use thunks.

There are a few more performance issues with large lists based on ( Raynos/mercury#97 ).

The main performance issue is hooks and the way <input> is implemented in virtual-hyperscript.

from mvi-example.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.