claudiopro/react-fiber-vs-stack-demo

⚡️ React Fiber vs Stack Demo

React Fiber vs Stack Demo

This demo shows the differences between Stack and Fiber by rendering a Sierpinski triangle that constantly shrinks and grows, and whose nodes have a value that increments by one every second.

Used as a demo during the ReactJS Dublin Lightning Talks meetup of February 22nd 2017.

License

MIT

Copyright (c) 2017 Claudio Procida

React and Fiber example Copyright (c) 2013-present, Facebook, Inc. All rights reserved.

react-fiber-vs-stack-demo's Issues

the number in fiber.html will not change if the timeout of `setInterval` is set to 20ms

the number in fiber.html will not change if the timeout of setInterval is set to 20ms, while stack.html can still change

feature request: add a checkbox to optionally increase seconds on every frame

Somebody saw your demo and created a repro using Aurelia
http://aurelia-thousand-nodes.bigopon.surge.sh/
and here is the repo
https://github.com/bigopon/aurelia-thousand-nodes

but with values in nodes updating only each second there is no way to compare.
Both implementations (react with fiber and aurelia) perform @ 60fps.

But if updates to seconds happen on every frame - things slow down a bit.

Could you modify your demo to include the checkbox that when checked eliminates the interval and increases seconds on every frame?

`shouldComponentUpdate` is never called in stack.html

shouldComponentUpdate is never called in stack.html if SierpinskiTriangle is function. So SierpinskiTriangle must be change to Class component.

I get the Fiber but what's Stack?

Hey React Fiber Seems super fast from the example. However, I am not very aware with the Stack, is it the name of the technology behind the previous version of react? Any pointers will be very appreciated. Thanks a lot that's a cool triangle example.

Fiber demo does not increment the number inside the circles

The number inside the circles is fixed to 0. It should increment just like the Stack version demo.

Is Fiber actually fast in this demo?

Here's the same demo using Aurelia: http://aurelia-thousand-nodes.bigopon.surge.sh/

I'm a bit surprised to see the Aurelia one performs so much better than Fiber on CPU usage during our tests, and the nodes also always update correctly under Chrome. Am I missing something here?

react and react-dom replace to 18.2.0 the example is not smooth

react and react-dom replace to 18.2.0 the example is not smooth