1. What is React?
React is a JavaScript library developed by Facebook for building fast and interactive user interfaces using reusable components.
Famous Websites Built with React
Facebook : React was created by Facebook itself. Used heavily for news feed, comments, UI updates.
Instagram: Built almost entirely with React. Uses React for feeds, stories, messaging.
Netflix :Uses React for fast UI rendering and smooth browsing experience.
WhatsApp: Web Built using React for real-time chat UI.
Airbnb: Uses React for complex UI, booking flow, and search filters.
Uber (Web App) : React powers dashboards, ride management, and maps UI.
Twitter (X) : Large parts of the UI are built using React.
Dropbox : Uses React for file management interface and dashboards.
Shopify : React is used in admin panels and storefront tools.
Reddit : The modern Reddit web interface is built using React.
2. What are components in React?
Components are independent, reusable pieces of UI.
Two types:
- Functional Components
- Class Components
3. What is JSX?
JSX (JavaScript XML) allows writing HTML inside JavaScript. It makes code easier to read and write.
const element =Hellow React ;
4. Why is React faster?
React is considered fast because of the way it efficiently updates and renders user interfaces. One of the main reasons is the Virtual DOM. Instead of directly updating the real browser DOM, which is slow and expensive, React creates a lightweight copy of the DOM in memory called the Virtual DOM. Whenever the application state changes, React updates this Virtual DOM first. It then compares the updated Virtual DOM with the previous version to identify exactly what has changed.
This comparison process is handled by React’s efficient diffing algorithm, also known as reconciliation. Rather than re-rendering the entire UI, React calculates the minimum number of changes required and updates only those specific elements in the real DOM. This greatly reduces rendering time and improves overall performance.
Another reason React is fast is component reusability. React applications are built using small, independent components. Each component manages its own state and re-renders only when its data changes. This modular approach avoids unnecessary updates and makes applications more responsive.
Additionally, React supports performance optimization techniques such as memoization, lazy loading, and batching of updates. Together, these features ensure smoother user interactions, faster page rendering, and better scalability. Because of these design choices, React is able to deliver high-performance user interfaces even in large and complex applications.
5. What is Virtual DOM?
Virtual DOM is a lightweight JavaScript copy of the real DOM. React updates only the changed parts, improving performance.
6. What is state in React?
State is a built-in object that stores component-specific data and can change over time.
7. What are props?
Props (properties) are read-only values passed from parent to child components.
8. Difference between state and props?
State
- Mutable
- Managed inside component
- Can change
Props
- Immutable
- Passed from parent
- Cannot change
9. What is useState hook?
useState allows functional components to have
state. const [count, setCount] = useState(0);
10. What is useEffect hook?
useEffect is used for side effects like API calls, timers, DOM updates.
useEffect(() =>
{
console.log("Component mounted");
}, []);
11. What is conditional rendering?
Rendering UI based on conditions.
12. What are keys in React?
13. What is lifting state up?
14. What is controlled component?
15. What is uncontrolled component?
Form elements managed by the DOM using refs.
16. What is React Router?
React Router is a popular JavaScript library used for handling navigation and routing in React applications. In traditional websites, navigating from one page to another usually requires a full page reload. React Router solves this problem by enabling client-side routing, where different views are loaded dynamically without refreshing the entire page. This makes React applications faster and provides a smoother user experience similar to native applications.
React Router allows developers to define multiple routes in an application and map each route to a specific component. When the URL changes, React Router automatically renders the corresponding component without reloading the browser. This is especially useful in single-page applications (SPAs), where the entire application runs on a single HTML page. Key features of React Router include BrowserRouter, Routes, Route, Link, and NavLink. The Link component is used instead of traditional tags to navigate between pages efficiently. React Router also supports dynamic routing, nested routes, route parameters, and programmatic navigation, making it highly flexible for complex applications.
17. Difference between class and functional components?
Class
- Uses lifecycle methods
- More complex t
- his keyword
Functional
- Uses hooks
- Simple & cleaner
- No this
18. What are lifecycle methods?
Methods like:
- componentDidMount
- componentDidUpdate
- componentWillUnmount
19. What is React Fragment?
Used to group elements without adding extra DOM nodes.
20. What is memoization in React?
Optimization technique using React.memo() to prevent unnecessary re-renders.
21. What is useContext hook?
Allows sharing data without prop drilling.
22. What is Redux?
A state management library for large applications.
23. Difference between Redux and Context API?
Redux
- External library
- Complex
- Best for large
Context API
- Built-in
- Simple
- Small/medium apps
24. What is prop drilling?
Passing props through multiple components unnecessarily.
25. What is higher-order component (HOC)?
A function that takes a component and returns a new component.
26. What is lazy loading?
Loading components only when needed using React.lazy().
27. What is error boundary?
A component that catches JavaScript errors in child components.
28. What is reconciliation?
Process React uses to update the DOM efficiently.
29. What is strict mode?
A tool for highlighting potential problems in React apps
30. Difference between npm and yarn?
npm and Yarn are both popular JavaScript package managers used to install, manage, and maintain dependencies in Node.js and React applications. npm is the default package manager that comes bundled with Node.js. It allows developers to install packages from the npm registry, manage project dependencies, and run scripts defined in the `package.json` file.
Yarn was developed by Facebook to address some performance and reliability issues found in early versions of npm. One of the key differences is speed. Yarn installs packages faster by caching downloaded packages and performing installations in parallel, whereas npm traditionally installed packages sequentially (though newer npm versions have improved this). Another important difference is dependency management. Yarn uses a yarn.lock file, while npm uses package-lock.json.
Both lock files ensure consistent dependency versions across different environments, but Yarn’s locking mechanism was initially considered more predictable and reliable. In terms of security, Yarn performs checksum verification to ensure that installed packages have not been tampered with. npm also provides security features such as vulnerability audits using npm audit. Overall, both npm and Yarn are mature and reliable tools.
The choice between them often depends on team preference, project requirements, and workflow rather than major functional differences.
