Welcome to the second part on idiomatic JSX. In the first part, I explored what the term idiomatic means, both in general and specifically within the context of software development. I also examined examples of idiomatic JSX components, weighing their advantages and disadvantages. This part will explore existing libraries that have similar functionality and for one of the libraries show how it can be used to create a reusable table and list component.

In this blog

• Drawing inspiration
• Introducing react-if
• Building an idiomatic list component

Drawing inspiration

Luke Skywalker didn’t master the Force on his own—he benefited from the wisdom of Yoda, the mentorship of Obi-Wan Kenobi, and even the sacred Jedi texts. Similarly, as developers, we don’t have to solve every challenge from scratch. 

Given React’s immense popularity, it’s no surprise that I was not the first to raise this topic, and a plethora of libraries exist to address the challenges I tackled in the first part of this series. A quick search reveals several options for conditional rendering, including (but not limited to):

• react-if (see reference 1)

• react-condition (see reference 2)

• jsx-control-statements (see reference 3)

• react-extras (see reference 4)

Using npm trends (see reference 5) as a guide, I decided to explore react-if further and integrate it into a small project.

Introducing react-if

react-if is a lightweight library designed to simplify conditional rendering in React. It provides a set of declarative constructs like <If>, <Then>, and <Else>, which make the program control flow more readable.

To illustrate, I’ve created a small React application that fetches data from a publicly available Star Wars API and displays it in both a table and a list. The complete source code for this example is available on GitHub (see below).

For state management, I used Recoil (see reference 6), a lightweight alternative to for example Redux. For HTTP requests, I chose Ky, a lightweight HTTP client (see reference 7). I had no prior experience with these libraries, small projects like this are an excellent way to experiment in my opinion.

The heart of the implementation lies in the PeopleContainer.tsx file, where the If, Then, and Else components from the react-if library are put to use:

The logic is straightforward—if the people data is present and not empty, it renders a <PeopleTableView>; otherwise, it displays a loading message. This simplicity reflects the intuitive nature of the react-if library. So unlike my own choice in part 1, react-if does choose for a full implementation of the if/then/else construct.

Beyond the <If>/<Then>/<Else> construct, react-if also offers features like <Switch>, <Case>, and <Default>, as well as convenient shorthand options for common scenarios.

Building an idiomatic list component

Displaying lists is a frequent task in React applications. Whether it’s a simple to-do list or a dynamic data feed, the underlying pattern is often the same:

1. A header for the list.
2. Items displayed in a structured way.
3. A fallback message for when no items are available.

By abstracting this pattern into a reusable component, we can simplify and standardize future implementations. Here’s an example of how to create such a component using the react-if library:

File: List.tsx

Key features:

• Using Typescript generics <T> allows the List component to take any type of items in the items array as input, while still remaining type safe.
• React-if library's <If>, <Then>, and <Else> components are used to conditionally render either the empty node or the non-empty list content.
• The header is displayed only if it has a value.
• The items array is mapped to <li> elements. A renderItem function is passed as prop, to allow for maximum flexibility.

In the snippet below from file StarShipContainer.tsx , the List component is used to display a list of starships. 

So, it was pretty easy to make a component that acts as a template for lists using react-if. It is good to note that libraries such as react-loops (see reference 8) have the same functionality as react-if. Exploring these alternatives could inspire further refinements that can ultimately lead to full blown libraries like for example AG Grid (see reference 9).

Closing thoughts

Writing idiomatic code is a practice rooted in the need for shared understanding and collaboration. It's similar to how human languages evolve to express ideas more clearly and concisely. Idiomatic patterns in code enable collective problem-solving in ways that are intuitive and universally understood.

Human languages evolve slowly, incorporating new ideas and being influenced by external factors like foreign languages. New words and phrases emerge, while outdated expressions fade away. Similarly, creating idiomatic React components is a form of collaborative language-making.

Just like there is no “final” version of a human language, there is no "final" or "correct" form for idiomatic code. It evolves with changing needs and the rise of new libraries and concepts. What feels natural and effective today may seem outdated tomorrow.

What defines truly idiomatic code? Is it simply following conventions, or is it about achieving elegance, simplicity, and clarity that resonates with both the author and the reader? What one developer sees as beautiful and succinct, another might find overly academic. What one team values for its explicitness, another might dismiss as clunky.

The concepts discussed in this series are not unique. While it's easy to feel discouraged by the thought that "everything has already been done," this abundance is an opportunity for innovation. By building on established ideas and experimenting with new combinations, we can advance further. Standing on the shoulders of giants allows us to see even further.

This series aims to inspire exploration of new patterns and libraries in your React journey. May the Force be with you!

References

1. https://github.com/romac/react-if 
2. react-condition - npm 
3. https://www.npmjs.com/package/babel-plugin-jsx-control-statements 
4. https://github.com/sindresorhus/react-extras 
5. https://npmtrends.com/jsx-control-statements-vs-react-condition-vs-react-extras-vs-react-if 
6. https://recoiljs.org/ 
7. https://github.com/sindresorhus/ky 
8. https://github.com/leebyron/react-loops 
9. https://www.ag-grid.com/react-data-grid/getting-started/ 

Code repository

The code shown in this article is in this repository.