How to Build an Infinite Nested Comments System in React JS | System Design + Code

Are you looking to create a comments section that can handle unlimited levels of nesting? Look no further! In this step-by-step tutorial, we'll show you how to build an infinitely nested comments system in React JS. You'll learn how to implement dynamic rendering, manage state using React Hooks, and optimize performance for large comment threads. Whether you're new to React JS or looking to advance your skills, this tutorial is for you. By the end of the video, you'll have a fully functional commenting system that can handle any level of nested replies. So grab your favorite beverage, and let's get coding!

Build 16 Medium/Hard JavaScript projects for live coding Interview rounds

What you'll get:
- Lifetime access
- Full video explanations of building each project from scratch
- 10+ hours of premium content
- Step-by-step explanations and code walkthroughs
- No bullshit, No time waste
- This project list Should get you ready for any JavaScript live coding interview round.
- Extremely cheap (You'll be surprised)
- Practical tips and strategies for mastering JavaScript
- Confidence in handling technical interviews
- Enhanced JavaScript proficiency

Content list:
1. File Explorer (similar to vs-code)
2. Infinitely Nested comments
3. Advanced Custom Toast notification from scratch
4. Drag & Drop, Swap, Add and delete elements using JavaScript
5. Custom Calendar/Date-picker
6. Multi-Select dropdown with support to add & remove elements
7. Build a Memory game with all rules integrated
8. Build an analog clock with smooth animation
9. Dynamic Progress bar with custom input support
10. Build a Star rating system with dynamic hover effects
11. Build a tic tac toe game with best practices
12. Advanced To-Do List with Local Storage support
13. Accordion with smooth transition effects
14. Countdown timer & days remaining timer
15. Create a custom modal
16. Build an optimised Chessboard

Crush Your React Interview: A Last Minute Preparation Guide

Details:
Have only a few days before your following react interview? Get ready for your React JS interview in no time with this comprehensive last-minute preparation guide! This handbook covers all the essential React JS interview questions and provides answers, tips, and explanations to help you confidently tackle any interview situation. Don't let stress and lack of preparation hold you back, grab your copy now and be fully prepared for your next big opportunity!

Pay once and you get the following:
- Frequent updates
- Lifetime access to all new questions and answers that get added with time
- Some questions include potential follow-up sub-questions asked in an interview (to strengthen your concept)
- Step-by-step explanation of each question with examples
- 36 in-depth conceptual Questions + Answers (with free access to all upcoming questions)

This handbook will help you:
- Ace your interview
- Potentially land a good job
- Boost your confidence
- Become interview ready
- Understand the implementation of concepts in real-world scenarios

0:00 - Intro
0:14 - Demo
01:29 - folder structure
02:07 - System design
03:36 - UI
11:35 - Starting with logic
12:17 - custom hook
12:38 - Add, reply comment (Insert node logic)
14:26 - Save, Edit, cancel comment logic (edit node logic)
17:24 - Delete comment logic (delete node logic)
18:44 - Improvements
19:28 - Final demo
19:54 - End

[xplodivity]

Build 16 Medium/Hard JavaScript projects for live coding Interview rounds



What you'll get:
- Lifetime access
- Full video explanations of building each project from scratch
- 10+ hours of premium content
- Step-by-step explanations and code walkthroughs
- No bullshit, No time waste
- This project list Should get you ready for any JavaScript live coding interview round.
- Extremely cheap (You'll be surprised)
- Practical tips and strategies for mastering JavaScript
- Confidence in handling technical interviews
- Enhanced JavaScript proficiency

Content list:
1. File Explorer (similar to vs-code)
2. Infinitely Nested comments
3. Advanced Custom Toast notification from scratch
4. Drag & Drop, Swap, Add and delete elements using JavaScript
5. Custom Calendar/Date-picker
6. Multi-Select dropdown with support to add & remove elements
7. Build a Memory game with all rules integrated
8. Build an analog clock with smooth animation
9. Dynamic Progress bar with custom input support
10. Build a Star rating system with dynamic hover effects
11. Build a tic tac toe game with best practices
12. Advanced To-Do List with Local Storage support
13. Accordion with smooth transition effects
14. Countdown timer & days remaining timer
15. Create a custom modal
16. Build an optimised Chessboard

[isumtk]

I was asked this same question in an interview for FE role. Thanks for solving this project.

[AMAN-unji]

I love this kind of projects, small but extremely useful. Besides, you understand because a specific topic is emphasized

[merajali]

Video is good but to shorten the video you've added copy pasted code, pls create another video for nested comments and write code online by communicating with us on the video. Your content and type of videos are challenging and helps us learn new concepts as compared to other youtube channels. Thank you.

[nicolaskorner]

Thanks for creating real world examples. Please keep these going!

[oscaranillo]

This is simple wonderful! Exactly what I was needing for a project!

[RavindraSingh-lppl]

Superb video man...very knowleadeable. Please make more such machine coding React series.

[utibeokodi]

Great article, an improvement would be breaking down the project into more components to adhere to SRP

[chahatbhatia]

I think it can be improved more by adding Context API instead of sending the callbacks using prop drlling.

[pritamhippargekar]

Verry useful and real time use case sir. Make one more vedio on roled based access menu.

[rudra]

How the f* do you build all this in 20 min while explaining this as well!!
Am I the only one tripping over this?

[Akephalos]

Came from Reddit, thanks this is great

[IAmOxidised]

using immer along with state could help with complete UI re-renders ?

[rayyanabdulwajid]

Don't you think this recursive approach is very inefficient compared to a simple approach. Refer to Nested comments section article by geeks for geeks as they have not used recursion. It is simpler to understand and involves lesser computation as well.

[Ravi_Goyal]

In insert node if id is found in first object itself then why are you iterating over rest of the objects also?

const insertNode=(comments, id, item)=>{
if(comments.id===id){
comments.items.push(item)
return true
}
else{
for (let obj of comments.items){
if(insertNode(obj, id, item)){
break;
}
}
}
}

does this make sense?

[bengternman]

Hey I just came from r/nextjs you are creating good content.
Could you make video how to create hook or api for uploading image or images to cloudinary and deleting them.
so for example user can add image to profile, remove it, add new one and so on.

[satyamgupta]

I don't want an infinite nested reply, so what do I do?

[ftheworld]

if possible then please also integrate rich text editor to the comment and reply box

[sumitbhardwaz]

one question. i want it to implement into my project? i want to comments to stay permanent ? Should i use database for fetching and storing comments there?
what is the viable and appropriate way to do this?

[lemon_maho]

I have a question: how would u make this with nested ul and li s so that we get different bullet point shapes for nested ones, I'm kinda struggling to do that, any ideas?