Make our component's Tailwind class names more understandable in React's JSX

Nick Vu — Sat, 15 Jun 2024 16:57:58 +0000

Background

Have you ever seen a long list of class names with barely knowing which components we try to debug?

I cannot deny that Tailwind helps our web development faster, especially, with styling, but when we try to use many of its utility class names within a single element. As a result, we cannot see the actual identity of that component and it may become a guessing game.

One of the solutions is that we can add a unique id or class name to identify that component

but I'd admit as a developer that sometimes, I'm too lazy to put it, or copy/paste components somewhere and forget to change their class name identities.

Solution

To solve the above problem programmatically, I implemented a higher-order component

const withComponentClassName = (WrappedComponent) => {
  const WrapperComponent = (props) => {
    const componentName =
      WrappedComponent.displayName || WrappedComponent.name;

    const className = componentName ? `c-${componentName}` : '';

    return (
      <div className={className}>
        <WrappedComponent {...props} />
      </div>
    );
  };

  return WrapperComponent;
};

export default withComponentClassName;

And then use it in components

export default withComponentClassName(MyComponent);

After that, it generates JSX like below

<div className="c-MyComponent">
   <MyComponent {...props} />
</div>

Now every single component will have this pattern in DOM. We can clearly see where those elements are from.

The only trade-off with this approach is that we have an extra div element wrapping our component that increases our DOM size, but in the long run, it has boosted my team's development as well as UI debugging.

3 questions I stumped upon when I developed this approach:

We still can forget to place it in our components, how to prevent that?

We implemented a custom ESLint rule to verify export default of our components with withComponentClassName usage (I'll share it with more detail in another post)

Can we embed that class name into the component's elements directly instead of adding an extra div?

The solution is more complicated and actually, it may make unexpected re-renderings due to class name prop/state updates, so we've accepted this simpler solution

Can we hide that class name addition layer on production?

Yes, we can add a condition in withComponentClassName like below

const withComponentClassName = (WrappedComponent) => {
  //production variable depends on your codebase setup
  if(production === true) {
     return WrappedComponent;
  }

  const WrapperComponent = (props) => {...};

  return WrapperComponent;
};

export default withComponentClassName;

ReactJS vs SolidJS

Nick Vu — Sun, 07 Aug 2022 15:52:00 +0000

I have had experience with ReactJS for a while, and recently, I found a new interesting framework which is SolidJS. Its community is still very small (~21k stars now on Github), so I'm not sure it's mature enough for enterprise products.

Right now I'm standing for ReactJS because of the huge community support but I believe SolidJS will have a bright future too.

I raised this post to get your opinions about SolidJS vs ReactJS.

A few questions in my mind

SolidJS is good enough for real web development?
Which one is faster in terms of web performance?
If you choose SolidJS, why?
Any strong points from SolidJS that can replace ReactJS in the future?

I really appreciate your precious ideas and welcome all open discussions.

Happy coding!

DEV Community: Nick Vu

Make our component's Tailwind class names more understandable in React's JSX

Background

Solution

ReactJS vs SolidJS