1, Difference ES5 VS ES6:-

Feature ES5 ES6

Released 2009 2015

Var
let and const (block-scoped,
Variable (function-
no hoisting issues for
Declaration scoped, hoisting
const/let)
issues)

Default Supported (e.g., function

Not supported
Parameters add(a=1, b=2){})

Arrow Introduced, shorter syntax

Not available
Functions and lexical this

Template Not available (string Available using backticks

Literals concatenation with +) `Hello ${name}`

Not supported (used

Introduced class keyword for
Classes constructor functions
OOP style
& prototypes)

Native support using import /

Modules Not natively supported
export

Iterators & Introduced (for…of) for

Not available
For-of Loop iterable objects

Not available (used Introduced Promise for

Promises
callbacks) async programming

2, Component life cycle:-

React components have a lifecycle, which refers to the various stages
they gothrough during their existence. Understanding the component
lifecycle is essentialfor managing state, side effects, and optimizing
performance.
Key Lifecycle Methods:-
constructor(props): Called when the component is created. Use it to
initialize state or bind methods.
componentDidMount(): Called after the component is mounted into the
DOM. Use it for fetching data, setting up subscriptions, or performing
side effects.
componentDidUpdate(prevProps, prevState): Called when the
component’s props or state have changed. Use it to update the DOM or
perform side effects based on the changes.
componentWillUnmount(): Called before the component is unmounted
from the DOM. Use it to clean up subscriptions, timers, or other
resources.
Example:-
import React, { useState, useEffect } from "react";
function LifecycleDemo() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Mounted");
return () => console.log("Unmounted"); // cleanup
}, []);
useEffect(() => {
console.log("Updated: count =", count);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div> -next line ); } export default LifecycleDemo;
 3, Define SPA AND MPA:-
1.Single Page Application (SPA)
A Single-page Application (SPA) is a web application that interacts with
the user by dynamically rewriting the current page rather than loading
entire new pages from the server. This approach provides a more fluid
user experience, similar to a desktop application.
Characteristics of SPA:
• Loads a single HTML page.
• Updates content dynamically without page reload.
• Faster navigation and better user experience.
• Relies on client-side rendering (JavaScript).
• Examples: Gmail, Facebook, Twitter.

Technologies used in SPA:

1, Frontend frameworks: React, Angular, Vue.js 2, AJAX / Fetch API for data
loading 3, Backend APIs (REST, GraphQL) 4, Routing libraries like React Router

2.Multi Page Application (MPA)

A Multi-page Application (MPA) is a traditional web application approach
where each page load results in a new request to the server, which then
returns a full HTML page. MPAs are more suited for larger applications
with multiple categories or sections.
Points about MPA:
• Each request loads a new page from the server.
• Slower navigation compared to SPA.
• Suitable for large content-heavy sites.
• Examples: Amazon, Wikipedia, eBay.
Technologies used in MPA: 1, Server-side frameworks: PHP,
ASP.NET, Django, Ruby on Rails, Spring MVC 2, Frontend: HTML, CSS,
JavaScript (basic) 3,Databases: MySQL, PostgreSQL, MongoDB, etc.
4, Difference of Props and State:-
Aspect Props State

Short for properties, used to A component’s own data that

Definition pass data from parent to can change over time and affect
child components. rendering.

Immutable (cannot be
Mutable (can be updated using
Mutability modified by the child
setState or useState).
component).

Who Controlled by the parent Controlled by the component

Controls It component. itself.

Used to pass data and

Used to store dynamic data
Usage functions between
within a component.
components.

Declared inside the component

Passed as an argument to a
Access (using this.state in class or
component (props).
useState in functional).

Updated internally by the

Updates Updated by the parent only.
component itself.

Re-render Changing props re-renders Changing state re-renders the

Trigger the child. same component.
Key Considerations of APIs:-
1, API Design: Choose an API design that is well-structured, easy to
understand, and efficient. 2,Data Formatting: Ensure that the data
returned by APIs is in a format that your React application can easily
consume (e.g., JSON). 3,Error Handling: Implement proper error handling
mechanisms to gracefully handle API errors and provide informative
feedback to the user. 4,Caching: Implement caching strategies to improve
performance and reduce the load on your API. 5,Security: Protect your API
endpoints from security vulnerabilities like unauthorized access and
injection attacks.