Recursive lists in React using Context

Photo by Markus Spiske from Pexels

Recently I have been working a lot with recursive trees, and displaying them in React. While working with them I came up with a pattern that I like, and that I want to share with those that run into this pattern. They can overcome this hurdle in a way that can be re-used quite easily.

To start, you want to create a context that has all of the functionality each node in your recursive tree might need. Lets for the sake of this article assume we are creating a nested keyword structure that we can use to tag stuff (pictures, tweets, posts, etc…) with. Nested meaning that keywords that have children that are selected, makes themselves selected (dog -> retriever, selecting retriever, also tags it with dog). Great. The context now has functions for selecting, and deselecting keywords.

Now, you create a keyword component that consumes the context and displays something, maybe what I would call a row. The only requirements I would make here, is that you should have the component accept a callback that returns a function to retrieve data (in this case, the next page of data). You pass this component as a render method to the precursor.

In general your structure would look something like this:

This assumes some things.

  1. You have to pass a function (or a react hook) to the Recurser component so that it can get children given the parent’s id. A function can work, but a dynamic hook can let you connect to redux, or consume a react context.
  2. The context provider holds the state for knowing what an item is tagged with, and provides functions for (in the case of keywords) changing that state.
  3. The context consumer and render component connects to the context provider and probably another context or redux state. This would allow the render component to get (again for keywords) the keyword’s name given the id. In the case of more complex objects, you could retrieve all properties of that object given an id.

This allows you to have different recursive lists, but keep the way they are nested and loaded. This could be good for a component in a keyword setup page, to set up possible keyword structures, and a second keyword component for tagging items with keywords. The rendered components can have totally separate functionality and layout but keep the recursion.

Check out a codepen example here:

Note: The codepen is a pretty big example, but I tried to replicate the fact that in redux you get data with selectors, and you don’t get the promise (or observable, or callback or whatever) in the component itself. It uses a custom hook in the index file that has comment explanations.




Senior Fullstack Engineer at Route

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Como instalar bootstrap no Angular

Create React 17 TypeScript With ESLint , WebPack & SCSS

Enumeration Objects in JavaScript

⚡️ From React to an Electron app ready for production

JS in Pipeline (2): Docker and Local Development Environment (2)

ReferenceError: what this means and how to debug it

JS Data Structures: Linked Lists

A/B Testing for Engineers w/Javascript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Blake Wight

Blake Wight

Senior Fullstack Engineer at Route

More from Medium

React JS Tutorial-3 | React Fragments

React Components

React JS and Next JS are popular JavaScript tools among front-end developers.

React Js | JavaScript Frontend Library