Transcript from the "Performance Gains Using Diffing" Lesson
>> We managed to prevent ourselves rerunning our updateDOM function every single time by introducing this hook code in a function that we could hook into, that allowed us, when we updated our data, to mask the fact that we will also rerun in our updateDOM function, converting it all to DOM elements.
[00:01:56] No conditional on this change, change this bit of the page, do conditional on this change, change this bit. No, just data, and here is what will be displayed, description of it in full light back in HTML. Very descriptive, very declarative, very composable, but dangerously inefficient. And so we're gonna introduce here, well, maybe it says on this slide here, all this benefit, but it's still dangerously inefficient.
[00:02:22] Only some of our elements need recreating from scratch. Couldn't we recreate a vDOM from scratch to give us composition, but then write an algorithm? Clever code to check what elements actually differ, and only change the DOM elements that really need updating. So we're gonna need to figure out which elements need updating.
[00:03:04] We have a handle function. And we have this new function findDiff. And then in line 23 and 25 or 6, we have two codes to create VDOM, which is gonna produce that instantiated array. I mean, it's instantiated, means put the data into it, in this case, array of subarrays describing the page.
[00:03:48] We then are going to run in line 28, a function we're coding here findDiff that is gonna compare those two arrays of lists of elements, array of sub arrays, that list of elements. And how is it gonna do it? We're gonna loop through one by one. And then when i is 0, we're going to look at the zero index or zeroth element of the created visual virtual DOM in VDOM1, which will be input, empty string, handle, and compare it to the current, which will be input, will, and handle.
[00:04:32] And if they're not the same, then we're gonna write some code to change the actual DOM element that we hopefully created the first time that we took that created VDOM. And actually, someone had to create the elements in the first place and put them on the actual C++ DOM in the first case.
[00:04:47] But next time we're gonna check, has the data led to an actual change in the elements such that we need to go and make any significant edit to the real C++ DOM elements? Amazing, amazing. We're gonna have to use JSON.stringify as our tool for easily comparing arrays and their content.
[00:05:15] So we're gonna pass in input, name, handle, which will be input, sorry, that'll be input empty string, handle, and that'll turn into, [INAUDIBLE] JSON.stringify, that'll turn into the string, input, space, function handle. And then when we do it again, it'll be, input, Will, function handle attribute will be input as you probably, input, function handle, and the next time will be input, Will, function handle.
[00:05:42] Will they be the same? No, they will not. And so we will have to go and do some real changes. However, for i equals 0, 1, 2, the ID2, whatever it's called, index 2, will div great job and div great job be the same? You bet they will, thank you, exactly.
[00:06:06] They'll be exactly the same. So will we go and change any actual DOM elements? No, we won't even need to.