Why React Uses 'className' Instead of 'class'

React, the immensely popular JavaScript library for building user interfaces has become a cornerstone of web development. However, one question that frequently arises, especially in interviews, is why React uses the className attribute instead of the conventional class attribute when dealing with HTML elements. In this blog post, we'll dive deeper than the common answers found on the internet to explore the true reasons behind this choice. We'll examine the historical context, technical considerations, and best practices that make className is the preferred option in React.

Common Misconception: Reserved Keywords

One argument often raised in discussions about why React uses className instead of class is related to transpilation. JSX, the syntax used in React for defining components, is transpiled into JS functions, specifically multiple createElement calls. These function calls are what React actually runs under the hood. JSX attributes are converted into properties of an object passed as the second argument to these createElement functions.

The argument goes like this: since class is a reserved keyword in JavaScript, it can't be directly copied and used as an object property to create an element function but it can(see below image).

So what's going on here? Why are we able to access it with the reserved keyword 'class' in the object but not as a variable? This is tricky because it wasn't always the case in ES3 you couldn't do it like that, but ES3 was replaced by ES5 in 2009 it was before react (2013) was created.

So, it wasn't a problem, right? you have to remember that back then we still had Internet Explorer and its version 8 didn't support ES5. So to make React compatible with other browsers. It was indeed a factor in making a decision to go with a className. Nowadays we don't have to support Internet Explorer anymore and even if we had to, we have transpilers (Babel, esbuild, TS) so we can use modern JavaScript constructs I bet you are using not only es5 syntax in your code but even things from very new JS version like optional chaining, Nullish Coalescing.

So reserved keyword is not a modern problem for JSX transpilation so why does react still use this className instead of class?

Why React still uses 'className' instead of 'class'

1. Consistency with DOM property names:

It's important to understand the difference between HTML attributes and DOM properties when you write HTML you assign attributes to HTML tags.

However, the browser constructs the DOM using DOM Node objects based on your HTML description and these DOM Node have properties interestingly also annoyingly the browser doesn't maintain a one-to-one relationship between HTML attributes and DOM Node properties

Therefore when react is being developed the team has to decide whether they have to stick with HTML attribute names or DOM Node property names. Since react itself operated on DOM Node back then they chose the latter. They decide to go with className

Nowadays, React no longer strictly maintains this 0ne-to-one mapping with DOM property names so this no longer a reason but it is indeed a historical reason

1. Cost of migration:

   Switching from className to class today would require writing not only react itself but also the entire ecosystem that currently uses className while the react team could have opted for backwards compatibility and allowed both names it would cause division within the

   react Community with some people using class and other using className leading to chaos

2. Destructuring props:

   Imagine using class as a property name for our custom components.

    return(
        <div>
          <Button class={"someClass"}/>
        </div>
    )
   

   Nowadays it is very common to structure props inside the component body we would want to write.

   
    function Button(props){
        // Destructuring props
        const {class} = props;       //syntax is illegal in JS due to its status as a reserved keyword.
        const {class:className} = props     //You have to use in-place renaming
        // Some dummy render
        return(
            <div>
                <button>
                    Confirm
                </button>
            </div>
        )
    }
   

   Using class as a property name inside a component is illegal in JavaScript due to its status as a reserved keyword. Developers would have to use in-place renaming, which can be less intuitive and prone to errors. This could undermine the benefits of migrating to class.

   In summary, the reserved keyword in Javascript is only part of the explanation and destructuring is probably the last strong argument standing in the way of refactoring React itself

Extra points to crush your interview

1. Using 'class' actually works:

   The name of the class will be passed by React. This support was added in React version 16. It only throws warnings in the console why warnings because still it's best to use the official className after all 99 of the react ecosystem uses it and consistency in naming is a good programming practice

   

Summary

In summary, React's choice of using className over class is rooted in a combination of historical context, the cost of migration, and practical considerations like destructuring props. While the misconception surrounding reserved keywords played a role in React's early design decisions, modern JavaScript standards and transpilation tools have rendered it less relevant.

It's worth noting that, despite the availability of using class directly, React's strong ecosystem still prefers className for consistency and best practices. This adherence to naming conventions aligns React with JavaScript patterns and fosters a more organized and maintainable codebase.

If you're preparing for an interview or seeking to deepen your understanding of React's intricacies, remember these details about className and React's design choices. They'll undoubtedly leave a lasting impression and demonstrate your proficiency with this fundamental web development library.

Now, armed with this knowledge, go ahead and ace your React interviews!