React JS Interview Questions ( File Explorer ) - Frontend Machine Coding Interview Experience

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question to build an Infinite File Explorer will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
➡️ Book an Interview Preparation call with me -
topmate.io/roadsidecoder
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 Javascript Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
00:31 Problem Explanation
02:10 Setup
02:21 Prepare Scalable JSON
03:32 Render the UI
11:38 Recursively Rendering UI
13:27 Insert File/Folder UI
13:38 Get Interview Preparation call with me
14:04 Insert File/Folder UI
19:51 Logic for Insert File/Folder
22:40 Creating Custom Hook
24:04 Depth First Search Algorithm
33:56 Homework
35:00 Important Task 👀
-------------------------------------------------------------------------
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/

[@arunyadav7467]

Make more such interview questions on react js this is really great sir

[@nallaparajuamareshvarma8471]

Bro please make part 2 I think like target has been achieved

[@anishmandal1248]

hi there, i'd like to know how would you perform searching for the file and folder in nested folder structure , please add it in 2nd part of it

[@priyabansal9911]

Haven't seen this kind of briliant content on KZbin. Keep it up

[@RoadsideCoder]

Thanks a lot! Please do share with other!

[@abhishekpundir5941]

Keep uploading these kind of videos...very informative and helpful. Keep growing ❤️

[@AvinashSingh-tr5vt]

Amazing! Eagerly waiting for 2nd part

[@Kumawatlalit912]

i was really thinking that how vs code folder works and you dropped a video, Thanks a million for this wonderful video💖💖

[@ankitkumarjat9886]

You can wrap input inside html form element can listen for onSubmit event And browser will handle enter button click and form

[@arpitj07_]

Great Video !! Looking for the part two now !!

[@rakeshkharvi4145]

Wow beautiful. Recursion thing works here !

[@NomadStriver]

This is great explaination. We need part-2 video.

[@hritikamathur3729]

Such informative and easy to understand videos you make! Thank you 😊

[@RoadsideCoder]

Welcome ❤

[@aaryansj8016]

Tysm bro.... I wasn't able such stuff in my project.... thanks..!!!

[@pratikwadekar4981]

Brilliant Content and Amazing Walkthrough of the code. The fact that you think of the problems and tackle it into smaller sub problems is really appreciated. Bring more such machine coding problems 🔥

[@RoadsideCoder]

find more such questions here - roadsidecoder.com/course-details

[@dineshkumargiri1659]

We are waiting 😍😍

[@developermanish]

Up until now i am thinking i know a lot i mean i know all the thing taught in the video but i never actually tried to write a good code and implementing concepts like event propagation ,custom hooks. There's still a lot to learn Keep the the good work man

[@RoadsideCoder]

Thanks man

[@vergil_389]

may all the good things happen in your life.

[@abhishekvishwakarma9045]

These kind of questions are very common in tech interviews and are also very interesting, (in one of the interviews I got to build a company-team-employee relationship which looks like an infinite tree structure and at the advance section I need to add a functionality that a team can fire/add an employee and similar for company-team relationship level -> time bound is 90min 🙃) I would Like to know your DP solution 😌, thanks for sharing your experience 🔥😎

[@shagunpreetsingh7105]

Can you please share you problem's solution.. also if you applied DP as well

[@hritickjaiswal2393]

If you are inserting on the first level then state would be mutated instead of being created new , which is advised in react docs. Please check or point out if am wrong. Apart from that amazing video.🙂

[@abhisheksaxena4845]

giving marginTop and marginLeft to both files and folders options would have done it for all, the amazing recursive solution is handling everything very crazyyy !

[@shouvikchoudhury9691]

1k likes already completed, plz bring the part 2 of this video

[@prikshit8]

recursion wala part. mind blown

[@arunyadav7467]

Make more such interview questions on react js this is really great sir

[@decostarkumar2562]

Sir why to use spearate hook with dfs for addig folder or file ? Can't we juat add extra folde or file at the position where we pressed enter key in the items folder ? It is working in my code that's why ...

[@piyushgupta6290]

Want to see more such machine coding Interview videos so that I can make some good projects for interview and sharpen my web dev skills. Great great job big brother

[@RoadsideCoder]

Thanks 🙏

[@Ravi_Goyal]

in insert node function if we want to add folder to public then it will traverse rest of the folder also. we can stop if folder is added not to traverse rest of the folders. latestNode = tree.items.map((ob) => { return insertNode(ob, folderId, item, isFolder); });

[@ibrahimsayyad5824]

Great project. Thanks for sharing

[@thirunavukarasusaminathan3102]

I really love this video and the concept of this unique one.👏👏

[@RoadsideCoder]

Thanks ❤️

[@sunilsarode152]

Superb content , thanks a lot :)

[@EktaTiwari-ts8jl]

Thank you for these videos/tutorials. Where is part 2 of this video on dynamic programming ??

[@dimplesingh5329]

This type of question was asked to me when I was giving interview for Value labs.

[@souvikmitra4953]

Explaining what one learns is a high level skill altogether and you ace this skill. May you have more success than what you currently enjoy going ahead!

[@RoadsideCoder]

Wow, thank you for such awesome words brother!

[@anuragdas1978]

I was think of using a priority queue so that the files and folders are in a sorted alphabetical order.

[@Hari-mr1st]

12:17 was shocking for me as well😮

[@UmeshYadav-no7vm]

Please make second part of this video. Thanks

[@mehulbhatia6008]

I don't understand why there are so less likes on such a great video. So informative and helpful for interviews. Keep up with such content!

[@RoadsideCoder]

💙

[@shagunpreetsingh7105]

A few questions: 1. Why to use a custom hook over a util function to insertNode in the tree? Since according to my understanding custom hooks has to be a "utility react component" 2. Should we deepcopy the actual tree and send that copy to the insertNode function to be cautious of any updations to the actual state (although it won't but we should always copy the state into new variable right?) 3. Please share the DP solution whenever possible 🙂

[@amulkumar5-yeariddminingen159]

this whole playlist is cool

[@guryashzone]

Mind Buzzing.

[@MrColins710]

good lesson, thanks for you work

[@Sandeep-zd6dq]

At 12:20, same reaction 😂😂😱🔥😎 then thought ki abhi kuch nhi aata apne ko abhi bahut kuch seekhna pdega 😂

[@mazenfayez5824]

as express backend developer, what topics should i cover before the interviews , auth , tokens , hashing , restful api and database , is there anything else should i study?

[@vincent3542]

it's really cool broooooo!!!🔥🔥🔥🔥🔥🔥🔥🔥🙇🙇

[@cworks73]

Pakka test! Tnx

[@rakaa31]

are bhai Saturday ko hi release krte, Sunday Evening is kind of relaxing!

[@asparshraj9016]

Oh boy, I still need to learn a lot.

[@user-te1ct2gy5z]

I got this question in an Interview. They asked me the same to do in vanilla javascript.

[@nikhilchawla6482]

As we already have the reference to the object and items so cant we add directly to the items the new folder of file instead of looping and find. can someone explain?

[@TheMayankkhare92]

What is the interview process at Microsoft for Frontend Engineer roles?

[@harshitsachan154]

Thanks for masterpiece.

[@AnuragArwalkar]

We dont need to traverse the ree to add element we can use reference variable to push the children and then we can force render react component

[@RoadsideCoder]

But will that update the explorer object?

[@coderRox]

Nice video, you have the explorer reference, i don't think we need the useTraverseTree hook.

[@dcode721]

Great 🤯

[@praveengopakumar5059]

great content

[@ankitagarwal4914]

1000 likes are already done , we are waiting for part2 of this (dynamic programming , edit and delete)

[@RoadsideCoder]

Thanks for reminder, I'll plan the next video!

[@ankitagarwal4914]

@@RoadsideCoder thank you

[@ankitagarwal4914]

Hi Piyush - It might be slip through cracks , as time permits request you to release part 2 of this Edit and Delete part

[@jitu11]

Great content and explanation.

[@RoadsideCoder]

Glad it was helpful!

[@akashdasgupta7493]

Bro the problem was same and what you experienced same I did, even I was shocked how did it recursively call the component 😂

[@learningjoe1823]

I am a full stack developer (Reactjs, Nodejs MySql, Mongodb) with one year of experience at a service based company. I am looking for a frontend role specific job in a product based company.

[@thekamol]

What a interesting and useful video, thanks Piyash a lot! More kinda react videos please! 🔥🔥

[@helix8847]

Would there be much difference doing this with TS?

[@shivankkunwar9669]

Can you also share in real interview how would you go about thinking of structure of data like the JSON data you use - wouldn't this require thinking all the possibility of data required and hence first completely thinking about the structure of the app ?

[@jagjot1697]

Great video! Can you share the codesandbox link? Also, if possible please make more videos with real world use cases of DSA. Maybe then I can finally convince myself to get on that Leetcode grind one day xD

[@RoadsideCoder]

Github link is in description

[@Dev-Phantom]

cool, unique concept

[@varswe]

Yes DSA is used, but only basics, not those wiredo leetcode problems, most of the times where intense dsa is needed, those things are done by DSA specialists

[@arwahakimuddin4595]

Hi , How do u open browser tab in VS code?

[@fifi5765]

1sub from here XD for this video

[@somyaranjandas4599]

you are boss of frontend

[@faaizalam235]

Bro please make more machine learning videos best work, and great contributions for new devs

[@RoadsideCoder]

Definitely!

[@mystory5328]

Thanks your content. Can you make a big project based on typescript redux toolkit.

[@dharmeshgohil9375]

awesome

[@anandbaraik5010]

Can you build `n level comments` app for mahine coding? Kindly bring something like this.

[@parmarhitendrasinh4504]

can you please give hint about applying dp on this problem

[@malleswararaoganapavarapu8685]

Instated of Json file , i would like to upload files and display as file explorer. Please give me the code if you have

[@chetanj5031]

Hi, In use-traverse-tree hook, isn't it wrong to mutate the state directly by doing tree.items.unshift ?

[@mehulsinghteya9144]

I was also looking for the same thing. In my opinion, we can use the native window.structuredClone() function to make a deep clone the state object first then we can mutate the new duplicated state variable in the functions.

[@aqibmalik6313]

You promised another video on this after 1k likes and ur video already has 2.6k likes Please uploading the continuation video

[@Akash-xv5sk]

It was really cool, how did you insert folder icon next to element inside JavaScript file itself, please share with us.

[@RoadsideCoder]

PC - Windows + ; Mac - Fn key

[@jitu11]

@@RoadsideCoder for Mac, Fn key with which key ?

[@RoadsideCoder]

that's it

[@rohitrox73]

bhai what should i do to get interview from big tech company for react js developer

[@samyakjain4715]

Why this tree is not getting affected by pass by reference?

[@_MS98]

Thanks 😀😀

[@saurabhbisht2238]

did you had a round in cars24?

[@karunasagarks5228]

Part2 please

[@varungondu7053]

I got this question in citizens bank interview

[@creatorstudio5945]

Sir, are such questions asked from fresher too?

[@debugloop]

what mic do you use bro ?

[@AnkitncrVlogs]

how to make table Data shorting This is my Interview question With MNC ... // on first click list will sorted in assending order // on second click list will be sorted in descending order // on third click default list will be rendered // on fourth click again start form step 1

[@nitigyajoshi4658]

Thanks bro

[@projectsnik305]

Bro can't we just do this with Redux or Zustand instead of custom hook??

[@anchalgupta8293]

This is easy way , try to make directory with depth of each node

[@rakeshkharvi4145]

Pls try to build infinite scroll using js

[@MrinalFouzdar]

waiting for part 2

[@vamshikrishna6001]

Waiting for Dynamic programming algorithm.

[@rakaa31]

nyc brother make some interview questions on react

[@RoadsideCoder]

Surely!

[@himanshujaviya6021]

Please Part 2

[@Wassim971]

Isn't tree.items.unshift() mutating the original react state?

[@elroinoronha433]

same question man. I think it does too.

[@awais_ansarii]

❤

[@nitigyajoshi4658]

Why did you destrustured showInput at @18:35 inside setShowInput? (setShowInput({...showInput, visible: false}))

[@anjalii1102]

If you simply use setShowInput({ visible: false }), it would replace the entire showInput state object with a new object that only has the visible property. This would cause you to lose any other properties in the showInput state, such as the isFolder property. (...) update the state while preserving the other properties.

[@resetengineering]

Can See 1000 likes. Where is part2?

[@iplmaniac]

Please make videos on these- Comment system Kanban Board Pagination Carousel/Slider

[@RoadsideCoder]

Thanks a lot for suggestions

[@roshan-jha]

Don’t you think useTraverseTree is an extra added complexity?😅 You could’ve used folder object reference directly🙃 then and there.

[@silverbullet_17]

exactly I did the same @RoadsideCoder please ans if we missing something

[@anuraggharat5453]

@@silverbullet_17 what approach did you use? can you explain ?

[@silverbullet_17]

@@anuraggharat5453 adding a new folder using the reference passed in every folder component

[@nishantmoolya]

​@@silverbullet_17 can u explain in more detail and is the UI gets updated by this method?

[@silverbullet_17]

@@nishantmoolya yes it gets updated!! when you loop in the file just pass the reference of the current object and then update it as required. that's it

[@saurabhrawat3878]

Same logic can be used for 'comment section' structure like of reddit, youtube

[@RoadsideCoder]

Yep

[@JassPlayz_]

Bhaiya redux toolkit pe video bnao plz

[@yashmishra9978]

Can someone explain how the Folder can be called inside the Folder itself? 12:20 I haven't heard of this concept before.

[@RoadsideCoder]

It is called Recursion,I have made a video on this concept as well - kzbin.info/www/bejne/enqmc3Z4j9OSgpY