Recursive components in React

#react #javascript #recursion

I think most developers have touched upon the concept of recursion, whether it be in that algorithmic course you dreaded in school or when working with some functional language. I also believe most developers have had some problems wrapping their head around the concept. That was at least my experience — so I definitely felt a bit apprehensive but also intrigued when I realised I had a problem that best could be solved with recursion. In this case by building a recursive component in React. To my great relief it was actually a lot simpler than I first thought.

To start off I will quickly go through the concept of recursion before showing how you can build your own recursive components. If you already have some knowledge about this feel free to skip ahead.

Droste - an example of a recursive image — A recursive image! There’s an image of the image in the image 🤯. A visual form of recursion. Source: https://en.wikipedia.org/wiki/Recursion

Recursion

Recursion is very common in divide and conquer algorithms or when working with tree structures of data. It is actually as simple as a function that is invoking itself until it reaches a base case. The base case is the end of the recursion where the function stops calling/invoking itself. If a recursion doesn’t have a base case it will create an infinite loop and go on until something finally crashes.

Recursive React components

Okay, so now we have a basic idea of what recursion is, let’s apply it to some React code. To understand the concept we will look at a very simple implementation of a recursive component.

As previously mentioned, a recursive function is calling itself for n number of times until it reaches a base case. React components are also functions, so what if we call a react component from itself? Et voilà, we have a recursive component! In the below example our component has two props: name and items . We render the name and if we have another level of items we call our component again with the next level instead — in other words we are “recursing”. We do this until we reach an item that doesn’t have any more children, that’s our base case. As you can see we will only call our component if it has children.

const RecursiveComponent = ({ name, items }) => {
  const hasChildren = items && items.length

  return (
    <>
      {name}
      {hasChildren && items.map((item) => (
        <RecursiveComponent key={item.name} {...item} />
      ))}
    </>
  )
}

To use the component we simply pass some data to it and there you have it!

const data = {
  name: 'Level 1',
  items: [{
    name: 'Level 2',
    items: [{
      name: 'Level 3'
    }]
  }]
}

export default function App() {
  return (
    <RecursiveComponent {...data} />
  );
}

It doesn’t have to be harder than this. We can pass an indefinite number of levels to the component and it still works. This is actually quite a good foundation to build some cool stuff from by just adding some CSS and a tiny bit of more functionality to it.

Here’s an example of a multi-level stack navigation component built with the same concept. Didn’t spend too much time on the CSS but you get the gist of it ;)[

https://codesandbox.io/s/gallant-lehmann-g8ifc?file=/src/App.js

Some final words

There’s nothing magical about recursion and most of the time we can achieve the same results by just using loops. In my opinion recursion should be used lightly as it adds some complexity to the code. But for some specific use cases like a folder structure or a navigation menu where we can have an arbitrary number of children it makes sense to use it, as other solutions like loops could be more complex.

Feel free to comment or link to some of your own implementations using recursive components. Until next time!