How to build a Recursive React Component

[@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 😅

[@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*

[@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 👍

[@club4796]

-enjoying 100% and understanding 10%

[@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!

[@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!

[@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.

[@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.

[@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.

[@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.

[@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!

[@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👍👍💖

[@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.

[@laptopuser5198]

This is one of the best channels for learning react.

[@ratishjain2718]

This guy deserves more subs man

[@ganeshbabu8263]

The Way you are using your editor is wonderful.

[@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.

[@Rajdidnotdie]

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

[@K.Huynh.]

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

[@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

[@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.

[@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.

[@D_bugit]

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

[@tritc]

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

[@dev-akeel]

I can't stop myself: Really Really Amazing 👏

[@zeeshan4341]

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

[@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.

[@Rico-cp4xp]

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

[@maddbzfan234]

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

[@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.

[@rajat_kaushik]

This was so well delivered!

[@alexandroarauco8097]

Amazing tutorial, explanation is so clear. Thanks.

[@yashsolanki069]

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

[@UdaySagar]

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

[@Bread-vk8fl]

This is amazing!! wow, i'm impressed

[@3Shivs]

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

[@adiMallya]

Damn. You just made it look less overwhelming!

[@wandenreich770]

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

[@aymenbachiri-yh2hd]

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

[@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.

[@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.

[@shubhamdas6519]

Thanks for the video sir.

[@alexg7282]

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

[@LHQQ888]

Thanks Sam !

[@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

[@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?

[@carefulcode]

Beautiful stuff man. Thanks for this!

[@technosujeet]

Nice explanation

[@alarsut]

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

[@limitlesskode]

This is genius. Subscribed

[@MohamedElguarir]

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

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

[@faruksardar8829]

Finally Sam is back 💖💖

[@sanjaytomar135]

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

[@kaushalkumar6666]

Awesome stuff explaining style is preety great and clear

[@jitxhere]

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

[@edgarasben]

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

[@collinsk8754]

Great stuff! Very clear!

[@osamammursleen]

Thanks. Its super fun to learn.

[@MrAlao675]

This is very clean and too awesome ❤❤❤

[@dgiri2333]

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

[@akshatdubey4421]

Great explanation!

[@voinbobar]

Simple yet very informative video! Love it.

[@풍월상신]

This is amazing!! Thank you Sam.

[@CodeWithRomaen]

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

[@IDOLIKIofficial]

Quality content, very clean stuff!

[@mudgalz]

You've got new subscriber

[@karsongrady]

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

[@regilearn2138]

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

[@nick-ui]

Lessgooo, Sam's comeback!

[@leulfanuel3550]

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

[@thanyaniinnocent940]

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

[@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!

[@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!

[@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!

[@luizvictoriobaptistaneto1561]

That was awesome!

[@abhisflyingsoon]

this is super helpful, thx :D need more pls

[@HeyNoah]

Dude, this is so cool!

[@lih4553]

Finally more vids 💪

[@swrserwerwr9137]

you are genius

[@acloudonthebluestsky9687]

You are the GOAT sir ,3

[@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.

[@igorgoncalves5691]

Nice explanation, thnks

[@maxwebstudio]

Great video

[@hab_tech]

keep posting bro I like your vids

[@sivabalanmurugavel6913]

Absolute 💎

[@scotle9901]

It's awesome. Thank bro.🎉

[@IkraamDev]

Great video as always!

[@yashone7]

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

[@andresgutgon]

Awesome video 🎉

[@anshikgupta2993]

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

[@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

[@redhat321]

very cool 👏

[@shafu_xyz]

so neat!

[@jomarmontuya1314]

Guess what, you got new follower

[@ekekw930]

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

[@Coder-Journey]

Holysheet that’s cool ❤

[@PitZza143]

Awesome