Coding

ReactJS Basics – #9 How does ReactJS update the DOM?

  • 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