6 min read

Sep 09, 2024

# Implementing Recursive Comments View

### What is recursion?

Now I'm sure most of you will be familiar with recursion already, but for those who aren't, recursion is a programming concept where a function calls itself. What? Calls itself? Yes, you heard that right. A function can call itself, and this is known as recursion.

The most obvious next question is *for how many times?*

Well, you see, until we don't want it to. Its upto us to set the condition, the "base case" as we call it. Until the job is done.

### Why recursion?

There a lot of areas of programming where recursion is used to solve problems. Some problems look naturally recursive. For example, traversing a tree, or a graph, or even a linked list.

Now an **important** thing which I must address, there are problems which can be solved by both iteration and recursion and mostly you can come up with a iterative solution to the same recursive solution you wrote. But there are problems which are best solved by recursion and not by iteration.

Let us see some examples where recursion is used:

**Fibonacci Series**: This is a classic example as we add last two numbers in the series, but we can also call the same function for getting the last number itself. Until, and here here comes the*base case*, we reach 1 or 0, we are sure of the answer and stop recursing indefinitely.**Tree Traversals**: Inorder, Preorder, Postorder traversals are all recursive in nature. We visit the left child, then the root, then the right child. And we do this for every node in the tree. And we stop when we reach a null node. Doing it iteratively requires stacks to keep track of the nodes which is again important for interviews.**Depth First Search**: We can use recursion to implement DFS. Doing so iteratively will require stacks but that is provided implicitly by recursion itself.**Factorial**: This is a classic example of recursion. We multiply the number with the factorial of the number one less than it. And we stop when we reach 1. Well for negative values which are not integers, you now will have to use some other method to calculate the factorial.

Okay! Enough with these examples. You say we'll never get to use recursion out of these interview style questions. But you see, recursion is a powerful tool and can be used in many places.

## Recursive Comments

Let's take an example of a comments section. We have a comment and then we have replies to that comment. And then we have replies to those replies. And so on. This is a recursive structure. You must've seen these on the internet, here's an example from YouTube comments.

In my Hackernews Client which was made to learn how to use Next.js, inspired by the example that SolidJS provides, I had to implement this recursive comments view. And I did it using recursion.

These are the comments on a specific post, they also have a property `comments`

which is an array of comments (well sometimes they are empty). And each comment has a `comments`

property which is an array of comments. And so on. Boom! Recursion!

So here's an actual implementation for recursion now! Instead of calling functions like we used above, we will now use our same `UserComment`

component.

It is important in any recursive case in the function to not call the function again with the *same* arguments. This will lead to an infinite loop. We need to change the arguments in some way. Here we want to render the sub-comments and hence we pass on the sub comments from the original post, until we don't have any more sub-comments.

For aesthetic purposes, we can add a margin to left with respect to the `level`

property from the JSON response, that will give a nice indentation to the comments.
We calculate that on the fly in the `className`

like so

Here's more or less the final component.

So this is now what we end up with:

And that's it! We have implemented a recursive comments view using recursion. This is a very powerful tool and can be used in many places. I hope you enjoyed this post and learned something new. Until next time, happy coding! ðŸš€

## References

- Hackernews Client - https://nextjs-hn-feed.vercel.app/top
- Source Code - https://github.com/w3dg/nextjs-hn-feed
- Solid JS Hackernews - https://github.com/solidjs/solid-hackernews