The Subtle Difference Between Parameter, Argument, Attribute and Property in React

Parameter and Argument

First, let's clarify the difference between parameters and arguments. In the traditional context of programming, Parameters of a function refers to the variables being passed into that function, during the declaration stage, or the assignment stage of the function. If we say it in the old-fashioned way, parameters are the variables being passed into a function when the function is at the left hand side (LHS).

Look at the following JavaScript example, name is the parameter.

//This is a function declaration
function sayHello(name) {
  console.log(`Hello, I'm ${name}`);
}
//This is a function assignment
const sayHello = (name) => {
  console.log(`Hello, I'm ${name}`);
};

On the other hand, argument of a function refers to the variables being passed into a function, at its invocation stage. In other words, arguments are the variable being passed into a function when the function is at the right hand side (RHS).

The following JavaScript example is the above function, being invoked.

const name = "hinzik";

// logs "Hello, I'm hinzik" on console
sayHello(name);

If the above definition is still a bit confusing to you, think it this way:

Arguments refer to the variables being passed into functions, when we "use" them, and Parameters refer to the placeholder of those variables when we "design" functions.

Attribute

The term attribute is very straightforward, it is originated from HTML.

All additional information that can be assigned to HTML elements is known as attribute.

For example, here's a <p> element with a "class" and an "id" attribute

<p
  class="my-class"
  id="my-p-tag"
>

Here's a <button> element with an "onClick" attribute

<button onClick="myEventHandler()" >

Property

We use property to refer to the keys of an Object in terms of JavaScript

The following is an JavaScript object named development, with two properties, name and lang.

const developer = {
  name: "hinzik",
  lang: ["typescript", "python", "rust"],
};

We can access properties of an JavaScript object in two ways, either using the dot notation, or the bracket notation.

// hinzik
console.log(developer.name);

// ['typescript', 'python', 'rust']
console.log(developer["lang"]);

Up to this point, everything is pretty clear:

• We use parameters and arguments when we are talking about functions
• We use attributes when we are talking about HTML elements.
• We use properties when we are talking about JavaScript objects.

Everything is understandable...until they introduced React...

React allows you to create react components, that look like HTML elements but are actually JavaScript functions, which accept JavaScript objects as arguments.

Do you see where does this evil, chaotic, anti-human crime come from now?

If you didn't get it the first time, no worries, let's break it down

The "Attributes" of React components

React codes are written in jsx format, the jsx file extension stands for JavaScript XML. One major benefit of jsx is that it not only allows us to write JavaScript codes, but also HTML codes in the same file.

This website is built with tsx (the TypeScript version of jsx), and the following are some code which rendered the page you are reading right now:

<div className="textleft my-auto flex flex-col items-center gap-10 px-2">
  <Suspense fallback={<PostLoadingSkeleton />}>
    <Post mdx={mdx} />
  </Suspense>
</div>

As they look almost identical to HTML syntax we know, how about we just use the term attributes to refer to the field "className", "fallback" and "mdx"?

Well, as those react components are designed to look like HTML, occasionally people indeed use the term "the fallback attribute of the Post element" to name them.

More frequently, people simply call them "the properties or props" of a particular react component

But why would we call them props if they are HTML elements?

The "Props" of React components

Believe it or not, even those components look really similar to HTML codes, and will be turned into HTML eventually, those react components are actually JavaScripts.

Which means at the end of the day, those react codes will be executed by some JavaScript engine. In order to make the JavaScript engines in our web browers to understand those HTML-like codes, a transpile process will be done by JavaScript compilers like Babel at the building stage of the website.

After the transpilation process, The HTML-like, react components, will be turned into the following JavaScript code:

React.createElement(
  "div",
  {
    className: "textleft my-auto flex flex-col items-center gap-10 px-2",
  },
  React.createElement(
    Suspense,
    {
      fallback: React.createElement(PostLoadingSkeleton, null),
    },
    React.createElement(Post, {
      mdx: mdx,
    }),
  ),
);

Don't worry if the above syntax looks a bit strange to you, we don't have to go through the code line by line, let's focus on the React.createElement() function.

According to the React API Reference, this function can accept up to three arguments

React.createElement(type, props, ...children);

The second argument, props, is where we provide the extra information about a component, which is equivalent to what the attributes do in terms of HTML elements.

Okay, but why does that argument called props?

The props argument must either be an object or null. If you pass null, it will be treated the same as an empty object.

We can find this in the reference, the function actually accept an object as its second argument, and an empty object will be created automatically if we don't provide any.

The argument is object, which carries extra information of an react component in key-value pairs, and how do we call the keys of an object?

Yes, we call them properties, or to be short, props.

Finally, we figured out why people sometimes use the term attribute and props interchangeably. Both of them refer to the extra information we provide to a react component, but we are not done yet!

The "Arguments" of React components

Let's get back to the HTML-like version of our page

<div className="textleft my-auto flex flex-col items-center gap-10 px-2">
  <Suspense fallback={<PostLoadingSkeleton />}>
    <Post mdx={mdx} />
  </Suspense>
</div>

If you think carefully, wait, there is no such HTML element called "Suspense" nor "Post", what are they?

Those HTML-like elements, typically have names start with a capital letter, is known as custom react components

As we found out in the last section, any react component, for example, the <Post mdx={mdx}/> component, will be transpiled to a JavaScript function at the building stage:

React.createElement(Post, {
  mdx: mdx,
}),

We now know that the second argument is the extra information of this Post component, aka the props, but what is the first argument, and what is the relationship between those two?

Let's see what does the API reference say about the first argument:

The type argument must be a valid React component type. For example, it could be a tag name string (such as 'div' or 'span'), or a React component (a function, a class, or a special component like Fragment).

Okay, so basically the argument is either a valid HTML tag name, or a React components. It is obviously not a tag name in our case, so it must be a React component.

What? That cannot be the case! How can we pass a react component into another reaction component as argument?

No, let me make this clear, we normally use the term "React component" to refer to that HTML-like element:

<Post mdx={mdx} />

But it is simply a syntactic sugar, it represents this JavaScript function under the hood:

React.createElement(Post, {
  mdx: mdx,
}),

What the term React component really refers to, is the first argument of the above React.createElement() function. In our case, it is a callback function, that returns some legitimate HTML elements to the page. All the JavaScript (element-specific variable, event handlers, helper functions etc.) associated with those elements is also being encapsulated into that callback function.

As for the second argument, the props, is actually the arguments being passed into that callback function, aka the React component.

So here we go, the truth revealed.

The React team creates a HTML-like syntax that allows us to provide extra information to React components, this mechanism makes us feel like we are adding Attributes to HTML elements; but under the hood those extra information is being passed to a callback function as one of its Arguments, or some may prefer call it a Parameter; in the data type of JavaScript object, which stores those extra information known as its Properties, and Props for short.

The article is inspired by a conversation between me and my mentee, while I was teaching him about fullstack development.

People often use all the terms we covered in the above article, interchangeably, as terms to refer to the extra information of a React component, which is known as props, most of the time. Some may argue it does not really matter as long as others can understand, but it is an awful idea in my opinion.

This article attempts to break through this ambiguity by exploring the etymological origin of these terminologies, making it easier for beginners to grasp the fundamental concepts of React.

End.