react, etc.

What is render() in React? Explain its purpose.

render() is the method React runs in order to create and display valid HTML elements (first, it renders into a React element, and then it renders into a standard HTML element) in the browser. it first builds the code into its virtual DOM and then interpolates it back to the browser’s native DOM through the single element,
<div id="root"> </div>
and every time that render() is invoked, React’s virtual DOM runs only the minimal JavaScript necessary to update whatever the author decides is important, while staying on the single .html file/page, index.html. this means the entire website user experience is had without a single refreshing of the page (as the user never leaves the single page). here’s an example of the only required html in order to build the world’s largest website (good luck tho):

Is setState() async?

yes. per the docs:

“setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.”

What are controlled components?

a controlled component is one whose state is controlled by the ReactDOM. its parent (or a grandparent) component handles the controlled component’s state through a callback located on the controlled component, which receives an updated state as props whenever necessary. this is as opposed to letting the native DOM handle say, a <form />'s state and leaving its input stranded on an island, isolated from the ReactDOM. and since the ReactDOM is responsible for the cohesive app experience (and must maintain a single source of truth), the user would be unable to properly interact with your program whatsoever.

What is the event loop in JavaScript?

check out my other blogs, as i have answered this question in a multitude of ways.

but if you must know… it is the engine JavaScript uses to process events by using listeners that are constantly firing blanks during the user experience (such as every pixel of mouse movement or a simple click, for example), only returning something when attached to some code, such as

document.getElementById("myBtn").addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

the event loop gets its name because of the pattern it uses to process events is as follows:

while (queue.waitForMessage()) {
  queue.processNextMessage()
}

the messages occur one after another, as function calls, which when processed as valid JavaScript will form a callstack and be executed one by one in the single-threaded JavaScript runtime. visual below.

thanks, MDN

Why does ReactJS use className over class attribute?

because class is a reserved javascript word. per the docs:

“Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.”