How to build any recursive component (using element path)

I have created a package that gives your freedom to create any recursive component using path based access to component.

wiz-ui - npm

Welcome to the React Easy Packager Component Library! This library provides a collection of reusable and customizable React components to help you build beautiful and efficient user interfaces for your web applications.. Latest version: 0.0.16, last published: 4 months ago. Start using wiz-ui in your project by running `npm i wiz-ui`. There are no other projects in the npm registry using wiz-ui.

npmjs.com

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) 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.