Firstly, let's think why className
was used over class
in the first place:
I recently watched a CSS in React conference video by Joel Denning who disagrees that className
was used because class
is a keyword in JavaScript. I am leaning towards agreeing with him, although I'm still not fully clear. What follows is the explanation from his video and some of my input:
Open up babel and compile the following JSX snippet:
const element = <div className="foo" />;
const element2 = <div class="foo" />;
Babel compiles this to:
var element = /*#__PURE__*/React.createElement("div", {
className: "foo"
});
var element2 = /*#__PURE__*/React.createElement("div", {
"class": "foo"
});
See how class
is treated as a string "class", so no issues with JavaScript keywords.
HTML elements have attributes like class
, and then once parsed a DOM node is created with properties like className
. Difference between attributes and properties? Take a look at What is the difference between properties and attributes in HTML?.
HTML attribute values can only be strings, whereas DOM properties can have any value. When it comes to dealing with class names I'm not sure how this is useful, but it's certainly cleaner to update DOM properties than attributes:
const div = document.createElement('div');
// Attribute update
div.setAttribute('class', 'foo');
// Property update
div.className = 'foo';
Also, updating a DOM property triggers a re-render which ties in nicely with the idea that the name of a class is a mutable state.
Attributes tend to be used to initialise DOM properties, however, the class
attribute and className
property are reflected i.e. updating the className
property causes the class
attribute to be updated with the same value... This makes the reasoning as to why className
was chosen confusing, maybe it's because semantically properties are associated with values that can update? I have no idea...
It's so confusing that React are allowing class
usage alongisde className
(as mentioned in the question). From https://github.com/facebook/react/issues/13525:
className → class (#4331, see also #13525 (comment) below). This has been proposed countless times. We're already allowing passing class down to the DOM node in React 16. The confusion this is creating is not worth the syntax limitations it's trying to protect against. We wouldn't do this change by itself, but combined with everything else above it makes sense. Note we can’t just allow both without warnings because this makes it very difficult for a component ecosystem to handle. Each component would need to learn to handle both correctly, and there is a risk of them conflicting. Since many components process className (for example by appending to it), it’s too error-prone.
In my opinion, there is no concrete answer to this question. I like the semantics behind using a property over an attribute to update something, but if you took me back in time to when the decision was made to use className
over class
I would have said it is unnecessary.
tldr; To answer your question, I would stick with className
which avoids the warnings of class
, and is the approach that most other React developers are familiar with so your code will be easier to read.
Still not satisfied? Take a read of https://github.com/facebook/react/issues/13525#issuecomment-417818906.