- 00:00:00 now that we learned that state allows us
- 00:00:04 to re-render our you eyes and now that
- 00:00:06 we saw that this is the case by clicking
- 00:00:08 on this button now the question is how
- 00:00:11 does react.js
- 00:00:13 actually rerender the UI because it's
- 00:00:17 really important that we do this right
- 00:00:20 otherwise it will cost us a lot of
- 00:00:22 performance now what would be the worst
- 00:00:25 case the worst case would be that the
- 00:00:27 whole dong gets rear-ended upon every
- 00:00:30 state change in any component so I click
- 00:00:33 this button and boom everything gets
- 00:00:34 rear-ended that would be very bad
- 00:00:37 performance wise and fortunately that's
- 00:00:40 not the case react is actually uses a
- 00:00:43 concept called virtual Dom which means
- 00:00:46 it has a virtual representation of the
- 00:00:49 actual Dom now the actual Dom is
- 00:00:52 something we can see in the developer
- 00:00:54 tools here right so that here that is
- 00:00:57 the actual Dom created or rendered by
- 00:01:00 the browser
- 00:01:01 now the actual Dom unfortunately is
- 00:01:04 really slow and accessing or rendering
- 00:01:08 re-rendering the Dom is really slow so
- 00:01:11 that is why react.js created this
- 00:01:14 virtual Dom which is a Dom written in
- 00:01:18 JavaScript so it basically took the
- 00:01:20 whole Dom and wrote a representation of
- 00:01:22 it in JavaScript the reason for that is
- 00:01:25 that javascript is really fast whereas
- 00:01:27 the URI actual Dom is really slow so we
- 00:01:30 have this virtual Dom which you can
- 00:01:33 think of looks like the thing on the
- 00:01:34 right here just in JavaScript code and
- 00:01:36 again that makes sense since we in our
- 00:01:39 render function also write JavaScript
- 00:01:41 code just in a nicer representation so
- 00:01:44 we get the virtual Dom and now I click
- 00:01:47 this button what happens react is
- 00:01:50 actually kind of recreates the virtual
- 00:01:53 down a second time and it recreates in a
- 00:01:56 way that would look like after this
- 00:01:58 state change so it recreates it and sees
- 00:02:01 ok in the new Dom in the new virtual Dom
- 00:02:04 still the actual Dom hasn't been touched
- 00:02:06 the age is now 75 a then compares this
- 00:02:10 compares this new
- 00:02:12 hold on to the old words hold on and
- 00:02:15 creates a difference has a look if there
- 00:02:18 is some difference
- 00:02:19 maybe both dorms are equal because maybe
- 00:02:21 we changed the state but it doesn't have
- 00:02:23 any impact on the currently rendered
- 00:02:26 components in this case it would see no
- 00:02:29 changes okay I'm done finish actual done
- 00:02:32 never gets touched but maybe it sees
- 00:02:35 okay New Age is 75 old age was 72 I need
- 00:02:40 to change it now it still doesn't rear
- 00:02:43 end early hold on because of that change
- 00:02:46 instead it will only rerender this part
- 00:02:49 here only the part which gets affected
- 00:02:52 and of course is really fast because for
- 00:02:54 one it uses the virtual dolls for the
- 00:02:57 comparison instead of the actual Dom
- 00:02:59 which would have been slow to begin with
- 00:03:01 and then when it has to rerender
- 00:03:04 something it only renders the part which
- 00:03:06 changed and not everything and we can
- 00:03:09 actually see this if I go to my
- 00:03:12 rendering tab here in the developer
- 00:03:14 tools or here in your options and then
- 00:03:17 more tools and then rendering settings
- 00:03:18 you can enable paint flashing this means
- 00:03:22 the browser will now show you whenever
- 00:03:24 something the Dom updates and you see
- 00:03:27 this if I reload for example everything
- 00:03:29 flashed green because the hold on got
- 00:03:31 updated and they hover over home it
- 00:03:34 updates because while these style
- 00:03:36 changes and now watch what happens when
- 00:03:38 I click make me older do you see that it
- 00:03:43 only updates the row where the ages in
- 00:03:47 and of course this button due to some
- 00:03:49 styling stuff but it doesn't update
- 00:03:52 anything else because the rest of this
- 00:03:56 application is not changing there is no
- 00:03:59 need to update anything else I can also
- 00:04:02 show this by going back to my home
- 00:04:04 component remember I have the status in
- 00:04:07 my state too and then here in the
- 00:04:10 constructor for example I'll add a
- 00:04:12 timeout and I'll set this to let's say 3
- 00:04:16 seconds and after this time expired I
- 00:04:21 want to basically just call
- 00:04:24 this set state and this time change the
- 00:04:28 status to one like that so if I save
- 00:04:34 this you see that after three seconds
- 00:04:38 this got highlighted and change I'm
- 00:04:41 going to reload this and then click make
- 00:04:44 me older age changed age changed state
- 00:04:48 has changed each changed you see it
- 00:04:51 updates only what it needs to update
- 00:04:53 that is why react.js is really fast and
- 00:04:56 how it manages the updating and re
- 00:04:59 rendering off your page and that is of
- 00:05:02 course important to understand
