How to build a Recursive React Component

[@nagasrinivasvinodkumarpand9309]

I am totally blown.. became an instant fan of this guy.. Love the teaching.. simplicity.. elegance.. ticked all the things.. don't remember when I was so impressed with just one tutorial video.. hats-off!!

[@no1_of_note]

Yes. The videos from this secret love child of Bradley Cooper and Hugh Jackman do indeed slap.

[@akg530]

I can’t stop staring at his face; too hot to handle AND he’s smart? we need more from him

[@magnuserikkeenrobot1117]

i agree, he is the best!

[@GordonChil]

*insert “Phrasing” Archer gif here*

[@srymisclick]

To understand recursion, first you have to understand recursion.

[@yeikiu]

Agreed, but both come right after understanding recursion

[@abnormal6376]

Very recursive.

[@jasonennis4905]

Pretty much 😅😂

[@Ra5h3d_]

I see what you did there 😅

[@srinivaskoruprolu7638]

How to explain recursion without explaining it 😅

[@azkaarkhatib]

Loved how you made your way to the solution step by step by writing the duplicate code first and then separating that into its component, then fixing the data structure, then the types, then the naming. This not only shows me how to implement the topic but also how I should be thinking if I run into duplicate code.

[@samselikoff]

Glad to hear the approach landed! I always like to motivate every step because in the real world you should only use a new approach or tool if you have a specific pain point it addresses 👍

[@extremus7673]

Crazy that I was building something similar at the moment, got somewhat stuck trying to think of a solution to do recursion, and this videos drops. Thank you so much!

[@privateaccount2607]

What an amazing video! This guy just made me the fan. The way he proceeds from scratch to the last was just incredible. Hats off to you.

[@Szchmausser]

Wow! what a talent you have for explaining! I managed to make it work, and because I understood the whole process I was able to adapt it to my system, where I needed to show some data with a hierarchical structure. Thank you very much!

[@tomershechner]

You're insanely talented, your teaching skills are top-notch.

[@danieladionisio5165]

I loved how he explained this topic. Thanks for your approach! Now it seems more easy.

[@jamesgulland]

Incredible video, simply explained. I’ve always heard about recursion but never had to apply it, this gave me the light bulb moment! Biggups.

[@Rajdidnotdie]

This is sooooo good , your style of explaining is very elegant.

[@mikeom1308]

Wow he has made this look so easy, while explaining it so clearly and concisely, was struggling with Typescript, now I think I understand it.

[@ilirbajrami2902]

Welcome back Sam! The world is safer when you are around :) Thanks for this one also! Very nice way to build a documentation page navigation.

[@MrBumbo90]

Very good tutorial. I used recursion in a threejs react component a while back and this is a good use case for it. Thanks for the effort.

[@Serkan0kur]

Great tutorial. It is not just presenting the final code, Sam demonstates how a programmer can move forward building and cleaning the code. Thank you Sam, for sharing the video. I will be waiting forward for more mindblowing contents.

[@laptopuser5198]

This is one of the best channels for learning react.

[@otaviomonteagudo6757]

I was looking into building something like this, this video was great. You've earned yourself a lifetime subscription for buildio .

[@samselikoff]

I truly appreciate the support

[@maddbzfan234]

i never knew about the react recursive components before, but this video cleared most of my concepts, and it was so cool 🙌

[@fireball7456]

I am so glad I stumbled upon this channel, that was so interesting to learn about! That was also so incredibly smooth and well edited. If you did this in one take, that's unbelievable.

[@amanjha3346]

Just straight to the topic no intro no fancy drama..this is lit 🔥 awesome

[@shoebuddin2533]

What an amazing explanation of data structure usage with react components. It is literally the best explanation I've seen since i started learning react👍👍💖

[@jitxhere]

It was almost magical as you progressed. Really like your teaching style. Wow I am amazed

[@tritc]

This tutorial video is amazing, and I am grateful for your help! Keep the good work bro!

[@WahiduzzamanHridoy]

I had done kind of the same thing a year ago for a project of mine. I really like the way you explained it. Thank you for sharing.

[@ganeshbabu8263]

The Way you are using your editor is wonderful.

[@ratishjain2718]

This guy deserves more subs man

[@club4796]

-enjoying 100% and understanding 10%

[@alexg7282]

Nice tutorial. This video's format is just perfect. Thanks a lot !

[@alarsut]

thanks for your video sam! I am looking forward to your new course.

[@olawumisegun5898]

Thanks Sam for all you do for the community. I would love to propose a tutorial on Radix UI, hopefully a responsive landing page or more

[@samselikoff]

Thanks for the kind words! I made a Radix UI course earlier this year but it was more focused on microinteractions - can you give some more examples of which primitives from Radix you'd like to see more of?

[@olawumisegun5898]

@@samselikoff Thanks alot for your response. Layout design showcasing the use of grid and flexbox would be fun to watch

[@fernandocanizo8267]

@@samselikoff I would like to know your opinion about the need for something like Shadcn/UI and alikes. Does it really provide value over plain Radix? Or anybody could just style Radix with ease? BTW, great video, pretty clear and to the point without missing anything.

[@yashsolanki069]

Absolute 💎 and loved the react conf presentation as well !!!

[@nourigadjanibrahim]

Great!!! We are waiting for a sequel to this file management tutorial

[@samselikoff]

Thanks! What would you like to see?

[@nourigadjanibrahim]

@@samselikoff Connection to a database. (CRUD) Automation of folder creation and file saving.

[@samselikoff]

@@nourigadjanibrahim Cool idea! Would you want to see the folder/file creation actually happen on the filesystem, or in a database with virtual files/folders?

[@MohamedElguarir]

maan, great to see you back on YT! Love your videos 🙏🙌

[@CodeWithRomaen]

missed your videos. absolutely love your videos. You are such a good educator

[@alexandroarauco8097]

Amazing tutorial, explanation is so clear. Thanks.

[@aymenbachiri-yh2hd]

Thank you so much sam, very helpful content, please keep posting videos

Thanks for sharing. This is completely about the case which I was assigned.

[@UdaySagar]

thats soo awesome ddude , i struggled to make one for one of my projects few days ago but not able to .. thanks .

[@rajat_kaushik]

This was so well delivered!

[@thabosiphiwemngoma1859]

I am yet to see a cooler react tutorial. Its so cool and useful

[@dev-akeel]

I can't stop myself: Really Really Amazing 👏

[@edgarasben]

Thanks Sam! Love learning small powerful nuggets like this:)

[@voinbobar]

Simple yet very informative video! Love it.

[@parkerrex]

Fantastic explanation. Also lots of little workflow tricks in here. I didn't realize there were 3 ways to use double cursors. Also never used emmet->remove tag!

[@BeeBeeEight]

Very nice tutorial, I subbed immediately. Just like to point out that outside of react, recursion can also be used to calculate factorials, permutations, summation series, etc due to the repetitive nature of these calculations. It helps to understand recursion in a general sense so we know when to apply recursive patterns.

[@carefulcode]

Beautiful stuff man. Thanks for this!

[@Rico-cp4xp]

The drought is over! Love your videos. Never heard of this concept before!

[@karsongrady]

Sheesh, that is a beautiful implementation! Thanks, Sam!

[@K.Huynh.]

Thank you for sharing. This video helps me a lot.

[@Bread-vk8fl]

This is amazing!! wow, i'm impressed

[@leulfanuel3550]

Great video, please keep em coming. We are learning a lot 🎉

[@adiMallya]

Damn. You just made it look less overwhelming!

[@zeeshan4341]

I have seen this example before. But loved your video 😊

[@akshaysingh5933]

Thank you for sharing! The feature is great. Could you also consider adding drag-and-drop functionality for folders and files? That would be fantastic!

[@kaushalkumar6666]

Awesome stuff explaining style is preety great and clear

[@D_bugit]

Just looking at this gives me an idea... Thanks ❤❤

[@magnuserikkeenrobot1117]

absolutely amazing. i love your style and your videos always amaze me. keep it coming! i recommend creating some shorter videos which shows some tips and tricks

[@풍월상신]

This is amazing!! Thank you Sam.

[@IDOLIKIofficial]

Quality content, very clean stuff!

[@wandenreich770]

Very informative..turns out I could have used recursion in my project

[@osamammursleen]

Thanks. Its super fun to learn.

[@MrAlao675]

This is very clean and too awesome ❤❤❤

[@sanjaytomar135]

it was great, thank you, and do make more videos like this

[@rachitshrivastava4583]

Hey Sam, loved this explanation and your way of teaching things step by step. I’ve been learning and using vim from past few months… may I know what shortcut did you use at 18:56 for renaming “Folder” to “Node” everywhere in the file? Also are you using VS code with vim enabled or the terminal with NVIM or something ?

[@samselikoff]

Thanks for the kind words! The rename is a VSCode feature, you can find it as "Rename symbol" in the command palette or with the F2 shortcut (which is how I do it). It renames things semantically so it understands scope and everything. Definitely one of my fave features and I use it all the time. I use VS Code with the vim extension: marketplace.visualstudio.com/items?itemName=vscodevim.vim

[@collinsk8754]

Great stuff! Very clear!

[@EissonAlipio]

amazing bro, thanks for sharing ❤

[@shanehoban]

Great example of recursive components. The next task you might want to consider is to have recursive components that effect state, where the page/top level state is changed, and also the specific child component state is changed (effecting it's child component) - which will cause too many re-renders if not handled correctly. Not to give away the answer, but imagine a top level state that is an object, where the child components have a button that can add new levels to this state onto themselves. The state must be pushed upwards in this case, and passing keys won't work in a multi level nested object (in an onChange for example). The task therefore is to have the state reflected correctly without causing too many re-renders. Happy to walk through in more detail, might be nice for another video for you.

[@samselikoff]

Yeah that sounds like a fun one! In general I don't like to think about re-renders in React until they cause a problem (and I think others should do the same). There's plenty of examples where the approach here will work just fine for. Also I'm hopeful the React Compiler will make that sort of perf optimization unnecessary.

[@regilearn2138]

It went like breeze, appreciate it we need react with SOLID principle please

[@shubhamdas6519]

Thanks for the video sir.

[@akshatdubey4421]

Great explanation!

[@limitlesskode]

This is genius. Subscribed

[@LHQQ888]

Thanks Sam !

[@abhisflyingsoon]

this is super helpful, thx :D need more pls

[@technosujeet]

Nice explanation

[@HeyNoah]

Dude, this is so cool!

[@3Shivs]

recently for drag & drop I handled it in unelegant way, am going replace this with recursion. Thank you so much man,

[@IkraamDev]

Great video as always!

[@scotle9901]

It's awesome. Thank bro.🎉

[@anshikgupta2993]

Can we add check boxes beside each node and add selection in parent children selection

[@habtesellasiefii]

keep posting bro I like your vids

[@faruksardar8829]

Finally Sam is back 💖💖

[@mudgalz]

You've got new subscriber

[@gutterball237]

Great video. What about when you add the functionality of creating a file/folder? won't it better (more efficient) for the newly created entity to have a reference for its parent, making the tree structure flatter?

[@gmg15]

awesome, it would be cool to see nodes having memory of its own collapse state

[@samselikoff]

Yeah I thought about this as well - I think I'd reach for a useLocalStorage hook for each node and use a single Set with the node's `id` as a key to pull this off

[@dgiri2333]

Nice it's help change browser UI Build Idea changes soon

[@luizvictoriobaptistaneto1561]

That was awesome!

[@acloudonthebluestsky9687]

You are the GOAT sir ,3

[@sivabalanmurugavel6913]

Absolute 💎

[@jackjsy]

Built something like this a few times and you gota be careful on very deep tree's when using state, lots of re-rendering! hopefully react compiler will solve all of that soon!

[@roid1510]

damn i never thought rendering a Component in itself was possible. On the other hand why wouldnt it work? its just a function. :D learned a new thing today. Thank you!

[@igorgoncalves5691]

Nice explanation, thnks

[@andresgutgon]

Awesome video 🎉

[@ekekw930]

How would you go about keeping the state of each open folder so on a page refresh the same ones stay open?

[@yashone7]

Sweet jesus, I didn't know rendering trees was this simple, or was it made simpler by sam?? Lovely stuff

[@thanyaniinnocent940]

Him: How cool is this This is so cool 💥💥🔥🔥

[@nick-ui]

Lessgooo, Sam's comeback!

[@aliveyeyt4136]

i used this before in one of my react job interviews. pretty cool!

[@jasper5945]

Cool

[@lih4553]

Finally more vids 💪

[@maxwebstudio]

Great video

[@flaviojunior4408]

Awesome tutorial man! One way the code could be improved is to make a component for a Folder and other for a File (kinda like a strategy). And since the collapsible state matters only for folders you could avoid creating unnecessary state for files

[@samselikoff]

Thanks! I actually think it's cleaner with one component - my general rule is to not extract until it's painful. I really appreciate how easy React makes it to incrementally add complexity & I fully embrace it in my work! If it started to get crazy you could definitely abstract but in my experience it's best to hold off abstracting as long as possible.

[@raymondmichael4987]

super cool; I wonder you didn’t drop some framer-motion magics 😊; regarding the document part, we can check the extention .zz to determine the type of icon to render 😊

[@samselikoff]

Haha I wanted to but forced myself to keep the vid focused - I did tweet about it though! x.com/samselikoff/status/1814342458051862840