How to build any recursive component (using element path)
Tags: javascript, webdev, programming, recursion
Published: 2024-06-03 20:04:17

I have created a package that gives your freedom to create any recursive component using path based access to component.
{% embed https://www.npmjs.com/package/wiz-ui %}

## Why we need a recursive component
Ofcourse to create UI that look similar and to render complex nested data structures.

> Recursive components in React are like Russian nesting dolls: perfect for handling infinite layers of hierarchical data, with simplicity!

Examples: 

> **1. Side Navigation** : Where menu items look almost similar and may have nested elements under them.
> **2. File directory listing** : Similar to a vscode nested directory/file listing
> **3. Comment section** : You use reddit/X([Twitter](https://x.com/theayushpapnai)) right, Comments under comments.
> **4. Rendering UI from Backend** : Creating dynamic UI on the go. (This may become tedious but your can try ofcourse).


## Why should you learn it
Most asked interview question for machine coding round.

ahemmm, actually its very helpful in understanding how recursion works and how to manipulate(update/edit/delete) array element recursively.

But, traditional recursive way is a bit heavy in terms of time complexity. Time complexity of normal recursive function that calls itself k times is O(k^N)

## Whats new in this article
Meri mehnat (My hardwork)

This article is not the usual way to create and manipulate recursive component, we will use path based access.

> **Path based access** : Access elements in nested arrays using a sequence of indices.

Example
```
Lets take below object as sample

{
  id: 1,
  name: "Root",
  children: [
    {
      id: 2,
      name: "Child 1",
      children: [
        {
          id: 3,
          name: "Grandchild 1",
        },
        {
          id: 4,
          name: "Grandchild 2",
        },
      ],
    },
    {
      id: 5,
      name: "Child 2",
      children: [
        {
          id: 6,
          name: "Grandchild 3",
        },
      ],
    },
  ],
}
```

In the above array, if you recursively access **Grandchild 3**, you will need to parse all the elements before it (waste of time).

The recursive approach will have high time complexity.

**Solution**

Now, what if I tell you that you can access each element just in O(K) times, K is the number of nesting the element is in.

This is an old approach but very fast and useful.

**Approach**

So, the idea is to associate a path to each element as we start rendering.

> **Path** : Its is a string or array of indices of each element to reach the final element.

So with above example, I will add path to each node

**Example**
```
{
  id: 1,
  path: [],
  name: "Root",
  children: [
    {
      id: 2,
      path: [0],
      name: "Child 1",
      children: [
        {
          id: 3,
          path: [0, 0],
          name: "Grandchild 1",
        },
        {
          id: 4,
          path: [0, 1],
          name: "Grandchild 2",
        },
      ],
    },
    {
      id: 5,
      path: [1],
      name: "Child 2",
      children: [
        {
          id: 6,
          path: [1, 0],
          name: "Grandchild 3",
        },
      ],
    },
  ],
}
```

Now to access these elements you can easily run a for loop and access the element and delete in just path length.


**Conclusion**

Recursive components in React efficiently handle and render hierarchical data structures, simplifying the creation of similar-pattern UI elements with nested components. However, traditional recursion suffers from high time complexity, as exponential growth occurs when a function repeatedly calls itself, making it inefficient for deep, complex structures.