Coding Interview Preparation

3. Once the calculations are completed, the real DOM updated with only those things which are changed.

2. Now, the difference between the previous DOM representation and the new DOM is calculated.

Virtual DOM works in three steps:

1. Whenever any data changes in the React App, the entire UI is re-rendered in Virtual DOM representation.

What do you understand by Virtual DOM?

Think of the Virtual DOM like a draft version of your web page. Instead of changing the actual page (which is slow), React updates this lightweight copy first. Then, it smartly compares the draft with the real page and updates only the necessary parts kind of like editing a document without retyping the whole thing.

Result? Faster updates, smoother performance, and a better user experience! 🚀

API Protocols

What is JSX?

JSX (JavaScript XML) is a special syntax in React that lets you write HTML-like code inside JavaScript. It makes your code more readable and intuitive because you can describe the UI directly in your JavaScript code.

Why is JSX useful?

✅ Easier to write & read – Looks like HTML but works inside JavaScript.
✅ More powerful than HTML – You can use variables, functions, and logic directly inside JSX.
✅ Optimized by React – JSX gets converted into super-efficient JavaScript calls behind the scenes.
Example of JSX in action:

const name = "Borislav";  
const element = <h1>Hello, {name}!</h1>;  

🚀 Here, {name} is a JavaScript variable inside JSX!

JSX is not HTML – it's just syntactic sugar for React.createElement(). You must wrap elements properly (e.g., use one parent tag).

Want to build awesome React apps? JSX is the way to go! 🔥

JOB INTERVIEW CHEAT SHEET