 So my name is Frances. So I work in a company called Datorama. And my company does compliance. We provide a platform for compliance partners to like check the investment if it's legit. So we use the major technology we use is Neo4j, which is a graph database. So actually, I just came to Singapore like last year. So before I came to Singapore, I was working in Tokyo as a front-end engineer. So that's where I kind of used React majority of my time. So today, I'm going to talk about React Fiber. So I'm not really going to talk about React 16 because this is kind of the most interesting part of it. So is any one of you kind of have already read a lot about React Fiber before? OK, so I'm trying to do more like a metaphoric presentation. So let's say in the Hawker Center, and you're caring for chicken rice. So basically like 1 to 10, the auntie or uncle would just take the order by like this. Something like one, if they order one, if they order one, and order two or order three. And the fourth person would be ordering like 10 of it. And the fifth person would be ordering one of it. So it will look like a staircase in a way of how the queue is being digested by the uncles. So for performance-wise, it's very like in a stack shape. So if you get a very big order, that it will kind of stuck in the queue, that people behind that big order will have to wait quite a long time in order to get the chicken rice. So the new system of queuing the same, like we still got 10. But the uncle would just prepare the order. And the auntie, sometimes when you go to the Hawker Center, there will be auntie to kind of take the order prior to quite a long time ago. Before you actually reach to the first in the queue, they will take your order. So the auntie would be telling the uncle to prepare chicken first. So basically splitting the task. And also taking higher priorities work like a special order, as in, I don't know, the ones that would take ages to prepare. And after the uncle finished a unit of work, let's say the unit of work would be defined by one chicken rice. Then auntie will tell him how much time is left. And then assign him with the next to-do list. So in this analogy, the auntie would be react fiber. And the uncle would be the main thread. So what react fiber is about? So react is kind of in two phase. The first part is reconciliation. And the second part is rendering. So no matter what reconciliation method is using, how react-native, react-dom-web is actually using its rendering part. So the engine to compile the tree is actually the same, which is where we refer to as a virtual DOM before. And this is how where fiber is lighting for react 16. So, I'm not connecting to you today. So state reconciler was the reconciliation method engine that react use before version 16. So what it would do, it would just have a very deep cost act. So basically the main thread will have to finish everything in the tree before it can do other stuff. So if you are doing a lot of intensive update to a UI, you might actually be experiencing similar things like you're inputting something in an input box and then you're trying to update some animation, which you might see in the very famous example of the triangle, like when they're trying to spread over the triangle and then change the number as well. So you get the very laggy updates. And fiber is the new thing, which if it starts with a capital F, it means a fiber engine. If it's like a lower-letter fiber, it means a unit of work within when you read the code. Basically, it's not trying to be faster, but in a way it's making your experience of user interface smoother. And the new stuff is it got some priority updates and corporate co-operative scheduling and incremental rendering and reuse work. So back to the analogy of like, as in a store in Hawker Center, so priority updates would be if in the queue there's something that is super urgent to do, let's say like someone is trying to save his life by eating chicken rice, then that would come forward in the queue in this analogy. And corporate scheduling as in, right now as React is like, you see the cost there as in like very staircase-like and that's referred as a synchronous scheduling. So what a cooperative scheduling is, like a sync scheduling. And incremental rendering is sort of a subset of how they implement the cooperative scheduling. And also you can reuse the work. So one of the major thing is like, for lower priority stuff, this fiber can stop the low priority stuff in order to do urgent stuff. So that like, let's say if I was updating negative with a new title, that would be considered as a low priority work. So that like, let's say if I get a super urgent work and the engine will have, the main thread will have to stop whatever it was doing and then update the intensive thing. So it doesn't mean that the diff that I was updating was like, the work is already gone. It's not, React will try to reuse it so that like it won't kind of like redo the stuff that it's already doing. So this is how the async scheduling works. So basically there's two, three main functions that will carry on. The first phase is begin work and complete work. And the first phase would be in unit of a fiber. So it will be like one fiber was in, like would begin work and complete work. But after, it doesn't mean that like after you finish the work automatically, it's immediately committed. So like it's like, it's finishing one, like let's say three fiber and then commit once. But how does it actually like schedule that I'm gonna do three jobs, three number one. So the first phase is interoperable. So as in like you have urgent, like more urgent work can kind of jump into the queue so that the lower priority work can kind of pause. And how it, so let's say, because the ultimate point is trying to make the rendering more smoother. So let's say 60 frames per second. So around like 10 milliseconds as in one, one duration for the react, for the engine to kind of come back to the main thread, the main thread to come back to react to ask like what can I do? So like how does it actually happen? It's like it will just utilize request idle callback for like lower priority stuff and request animation frame to call the more like important stuff as in like animation stuff. And so, so the basic, the basically you have a current fiber. So it will try to how it kind of schedule is the order of how things work is first it will look for its child. And after the child like, okay, I worked on, then it will go, it will get attacked to the, as you see the blue tag over there. It will attack to the new work in progress fiber tree to like let the, to get this in the commit, to get this in the effect list for the upcoming commit. And then after that, so the return function is like how when it kind of clones the tag to the work in progress fiber. And then it will go through its sibling. So if there's a sibling as in like, you have one like hex one and then after that it will be like an order list. Then the order list will be its siblings and it will do the same thing. So after that it will compile, like it will merge back to the effect list. Ultimately you'll get a giant like effect list with the updates that you're trying to do in this timeframe. So yeah. And after that the current fiber will become the old fiber and the work in progress fiber will become the current one. So they just kind of switch the point so that like you get a like caching fiber effect. So the main point is like, let's say if you have a 15 milliseconds and like for example, the first word you've used like three milliseconds. So you've got like seven milliseconds left. So what it will do is like it will call request out of callback and to see like what can I do next. So whenever it calls it, it will tell the main thread like how much time I left, which is the idle deadline, which comes with the function as a time remaining to actually remind the main thread. Yeah, so actually from version 16.0 is by priority. So maybe you have seen it before that like the priority will take it's no work synchronous priority, task priority, like high low off screen. So like no work is the highest and the begin work function will take priority level as a params when it tried to begin the work. But then if you check in a version 16.1 plus, it no longer becomes the priority level. It actually becomes expiration time. So the earlier the expiration time, the higher the priority. So for the same function of begin work, it will take the render expiration time as what the priority level was doing. So like as you can see, I think they're still changing the API as even though like fiber is official release. And so we kind of like, if you want to kind of keep an eye on it, then you have to kind of like download or like pull when it's updated. Sorry. So like I was gonna show you the, there's one. So like if you can go, like if you're interested in knowing how this like thing works in as in like a super step by step thing, you can go to this website, which is built by some like awesome people, but which I don't know. So you can see like, let's say the first time step is like after begin on road, this one. So it says like it needs no low priority work. And this, the child of this guy is a diff, which means low priority work as in the effect is her placement. So what it does is it will go to the child to do the work and then take it as a effect with a placement and then we'll go back, return and then it will try to commit the work. If the time is already like finished. So the next one, it will just go to the route number one and then again, do the same thing. And then you can kind of turn on and turn off stuff to see the alternate, like the pointer that I was referring as in like after fiber is done, then the pointer will actually like switch and return. So this is actually quite good website, I feel. And so go back to the commit phase, which is this phase is non-interruptible. So you cannot really do stuff like when I'm committing, like I have this urgent job, then I must jump, you cannot. So what this stage will be mainly be doing is that it will trigger the life cycles that would eventually be called when the components updates. So the life cycles that will be triggered is only component did mount, component did update and component will amount. So it means that like for the stuff like component will receive props, they will actually call in the first phase. So let's say if you're updating a low priority components and then you're utilizing the functions of the life cycles of component will receive props, it might get called like a lot of times, even though the work hasn't been done for this version. Cause like ultimately this is where the work are being committed. The first phase is the life cycle, the life cycles can be called multiple times because the low priority works can be like interrupted and like they can resume afterwards. So that like, so that like for version for React Viper I feel this would be the most influential part that people will have to change it eventually if async scheduling is by default the engine. Yeah, so how does audit or will it affect us? So generally nothing at the moment because for version 16 by default async scheduling is turned off. So everything is in sync scheduling which is the same as in previous version. So let's say in version 17, if async scheduling is turned on by default the existing apps will the logic will have to change like might have to change if you utilize heavily on the life cycles that are in the first phase which including a lot of like will update that kind of stuff. And yeah, so if you're interested in like reading more about Viper so I found there's quite a lot of good website that like kind of look into Viper some of it are in like a very cold drilling style and some of it is more like an overview and I personally really recommend this one. So this is a presentation in React 17 that this lady made a cartoon introduction into Viper which is very good if you haven't really like read about Viper at the first place which is a very good introduction to it. Yeah, so that's it. Sorry. Thank you. Thank you. Thank you. Oh yeah. So if you're interested in working with the React or like graph database like me and my colleague are here like my colleague son is here like if you're interested then like kind of can talk to us as in if you're trying to yeah.