1. What is React?
Answer: React is a JavaScript library for building user interfaces. It is created
by Facebook and a community of developers. React allows developers to create large
web applications that can update and render efficiently in response to data
changes.
2. What are the major features of React?
Answer: Major features of React include:
JSX (JavaScript XML): A syntax extension that allows writing HTML within
JavaScript.
Virtual DOM: React uses a virtual DOM to improve performance by minimizing direct
DOM manipulations.
Components: Reusable building blocks of a React application.
One-way Data Binding: Data flows in one direction, making the application more
predictable and easier to debug.
3. What is JSX?
Answer: JSX is a syntax extension for JavaScript that looks similar to HTML. It
allows developers to write HTML structures in the same file as JavaScript code. JSX
gets transpiled to JavaScript at runtime.
4. What is the Virtual DOM?
Answer: The Virtual DOM is a lightweight copy of the real DOM.
5. What are components in React?
Answer: Components are the building blocks of a React application. They are
reusable and can be either class-based or function-based. Components can maintain
their own state and manage their own lifecycle.
Intermediate Questions
6. What is the difference between state and props?
Answer:
State: Managed within a component (mutable) and is used to store data that can
change over time.
Props: Short for properties, props are read-only and are passed from parent
components to child components to convey data.
7. What are hooks in React?
Answer: Hooks are functions that let you use state and other React features in
function components. Examples include useState, useEffect, and useContext.
8. What is the useEffect hook?
Answer: The useEffect hook lets you perform side effects in function components,
such as fetching data, directly interacting with the DOM, or setting up
subscriptions. It runs after the render and can optionally clean up by returning a
function.
9. What is the difference between controlled and uncontrolled components?
Answer:
Controlled Components: Form data is handled by React state. The component's state
is the single source of truth.
Uncontrolled Components: Form data is handled by the DOM itself. Refs are used to
access form values.
10. How do you pass data between components?
Answer: Data is passed between components using props for parent-to-child
communication. For sibling or more complex communication, state management
libraries like Redux or Context API can be used.
Advanced Questions
11. What is the Context API?
Answer: The Context API allows for sharing state across the entire application (or
part of it) without having to pass props down manually at every level. It’s useful
for themes, user information, and other global data.
12. What is React Router?
Answer: React Router is a library used for routing in React applications. It
enables navigation among views of various components in a React Application,
allowing the browser URL to be updated and keeping the UI in sync with the URL.
13. What are higher-order components (HOC)?
Answer: Higher-order components are advanced techniques in React for reusing
component logic. An HOC is a function that takes a component and returns a new
component, typically to add some additional functionality.
14. How does the reconciliation process work in React?
Answer: Reconciliation is the process through which React updates the DOM. When the
state or props of a component change, React generates a new Virtual DOM tree and
compares it with the previous one. It then calculates the minimal set of changes
needed to update the real DOM to match the new Virtual DOM.
15. What is the purpose of keys in React?
Answer: Keys are used in React to identify which items in a list have changed, been
added, or removed. They help React optimize rendering by providing a way to track
elements and their order, thus minimizing the number of DOM operations.
16. What is axios?
Answer: axios is a third party library used to communicate with backend. It makes
requests to API and return data from API.
17. What are the props in react?
Answer: Props is a special keyword in React that stands for properties and is used
for passing data from one component to another.
Difference between virtual dom and real dom.
You can take down the entire menu board, rewrite the entire menu from scratch, and
then put it back up. This is like how the Real DOM works. When you update the DOM,
the browser has to re-render the entire page, which can be slow and inefficient.
Virtual DOM: The New Way
Or, you can take a piece of paper, write down the changes you want to make to the
menu, and then only update the specific sections of the menu board that need to
change. This is like how the Virtual DOM works. When you update the Virtual DOM,
React (or other libraries) creates a lightweight copy of the DOM in memory, makes
the necessary changes, and then only updates the specific parts of the Real DOM
that need to change.
Key Differences
Here are the key differences between the Virtual DOM and the Real DOM:
Speed: Virtual DOM is faster because it only updates the parts of the DOM that need
to change, whereas the Real DOM re-renders the entire page.
Efficiency: Virtual DOM is more efficient because it reduces the number of DOM
mutations, which can be expensive operations.
Accuracy: Virtual DOM ensures that the DOM is updated accurately by keeping a
lightweight copy of the DOM in memory.
How Virtual DOM Works
Here's a simplified example of how the Virtual DOM works:
The user interacts with the app (e.g., clicks a button).
The app's state changes (e.g., a counter increments).
The Virtual DOM is updated with the new state.
The Virtual DOM is compared to the Real DOM to determine what changes need to be
made.
Only the necessary changes are applied to the Real DOM.
Example Code
Here's an example of how React uses the Virtual DOM to update the DOM:
jsx
VerifyOpen In EditorEditCopy code
1import React, { useState } from 'react';
2
3function Counter() {
4 const [count, setCount] = useState(0);
5
6 return (
7 <div>
8 <p>Count: {count}</p>
9 <button onClick={() => setCount(count + 1)}>Increment</button>
10 </div>
11 );
12}
In this example, when the user clicks the button, the count state changes, and the
Virtual DOM is updated. React then compares the Virtual DOM to the Real DOM and
only updates the <p> element with the new count.
