For Loops? Recursion? (Advent of Vue #4)

My solution to the fourth Advent of Vue challenge!
🎄 Advent of Vue: adventofvue.com/
💻 Code: github.com/lmiller1990/aov202...
If you like my teaching style, I have a book and two courses!
👀 (Book) Design Patterns for Vue.js: lachlan-miller.me/design-patt... (YT_5_OFF for $5 off)
👉 (Course) Vue.js: The Composition API: www.udemy.com/course/vuejs-3-...
🖖 (Course) Complete Vue.js 3: www.udemy.com/course/complete...

[@tombranson9341]

Recursive call render stack works the same as if we wrote a fibonacci recursive function, it stacks the stacks and when the final guard statement returns (ie size = 1), then the return statements in this case render, so the first return that gets rendered in the case of size = 1, then the rest of the returns flow up to the size = 7, in this case. Just like a fibonacci sequence would do 1, 1, 2 ..... x. Like a computer has trouble going past 40 or so repetitions of a recursive call, we could probably make the browser tab crash by making a big christmas tree.... the problem I see with recursive rendering is that the browser has to wait for the calls to finish before it gets to render thus holding things up, in a loop, nothing is held up, and we can make a very large tree if we wanted.

[@LachlanMiller]

I didn't think about the performance implications of the recursive component at all... good point. An interesting video or blog post would be actually benchmarking the two implementations. I'd like to know the exact numbers.

[@emmanuelgeoffray8949]

Thanks for this video! I also prefer the simple solution rather than the overkill recursive component. Thanks for the tip about using inline component, it can be very convenient for simple templates that would be too small to require its own file. Are you planning to use Cypress test component in next challenges ?

[@LachlanMiller]

Thanks for the comment! I'll try and add more content around Cypress in future videos - if I was to add a test to this, I'd probably use Cypress + a visual regression service like Percy.

[@sebastianjung3168]

Any thoughts on chromatic vs percy? Are they even comparable?

[@sezeryardim3276]

Hi @LachlanMiller The reason why it is not upside down on recursive version is this. I will try to visualize it. Remember the stack is LIFO. Last in first out. So the last is the one being completed first. Because it is the last component ( function ). I really enjoy your videos and learn a lot from them. It is exciting to me to have an opportunity to give you back even though it is tiny one compared how much i learnt from you. If we render div before ChristmasTree i guess it will be upside down

[@_the_one_1]

Wow! We can create functional components like this? Where did you learn that?

[@LachlanMiller]

I am not sure where I first saw it, but it's in the documentation if you want to learn more: vuejs.org/guide/extras/render-function.html

[@_the_one_1]

@@LachlanMiller yeah I read that after you video, thanks.

[@baranoid]

what happened to #3? :D

[@LachlanMiller]

I think I mentioned at the start, it's not a very interesting one. I can share a solution if you really want 😅

[@shareefhassan8197]

did not know you can use jsx this way in vue

[@LachlanMiller]

Thanks, I will make more content about the tooling ecosystem in Jan after Advent of Vue is finished!

[@shareefhassan8197]

Can't wait for it 🔥