.jpg)
1. What is React?
Answer: React is a JavaScript library for building user interfaces, particularly single-page applications where data changes dynamically over time. It allows developers to create reusable UI components.
2. What are the main features of React?
Answer:
-
Virtual DOM: React uses a virtual representation of the real DOM for fast UI updates.
-
JSX: A syntax extension that allows writing HTML-like code in JavaScript.
-
Components: React applications are made of reusable, independent pieces called components.
-
One-Way Data Binding: Data flows in one direction, making debugging easier.
-
Declarative UI: You describe what the UI should look like for a given state.
3. What is JSX?
Answer: JSX stands for JavaScript XML. It allows developers to write HTML elements in JavaScript and place them in the DOM without using createElement() or appendChild().
4. What are components in React?
Answer: Components are the building blocks of a React application. They can be either class components (with state and lifecycle methods) or functional components (with hooks for managing state and side effects).
5. What is the difference between functional and class components?
Answer:
-
Functional components are stateless and used to render UI, but with the introduction of React Hooks, they can now manage state and side effects.
-
Class components are stateful and have access to lifecycle methods (e.g.,
componentDidMount(),shouldComponentUpdate()).
6. What are React Hooks? Name a few.
Answer: Hooks are functions that let you use state and other React features in functional components.
-
useState: For state management. -
useEffect: For side effects like data fetching, subscriptions. -
useContext: For accessing context data without prop drilling. -
useReducer: For managing complex state logic.
7. What is the Virtual DOM? How does it work in React?
Answer: The Virtual DOM is a lightweight copy of the actual DOM that React uses to detect changes efficiently. When the state of an object changes, React creates a new virtual DOM and compares it with the previous one. Only the differences are updated in the real DOM, leading to faster and more efficient rendering.
8. What is the difference between state and props?
Answer:
-
State is local data stored within a component that can change over time and trigger re-renders.
-
Props are inputs to a component passed from a parent and cannot be modified by the component itself.
9. What is useEffect hook in React?
Answer: The useEffect hook allows you to perform side effects in function components. It runs after the render and can be used for data fetching, subscriptions, or manually updating the DOM.
10. What are React lifecycle methods?
Answer: Lifecycle methods are hooks that allow you to run code at specific stages of a component's lifecycle (only applicable in class components).
-
componentDidMount: Runs after the component has been mounted. -
componentDidUpdate: Runs after the component updates. -
componentWillUnmount: Runs before the component unmounts.
11. What is Context API in React?
Answer: Context API is a way to share global data (like themes or user data) between components without prop drilling. It provides a way to pass data through the component tree without having to pass props manually at every level.
12. What is memo in React?
Answer: React.memo is a higher-order component that prevents unnecessary re-renders of a component if its props haven't changed, improving performance.
13. How does React handle form inputs?
Answer: React handles form inputs using controlled or uncontrolled components.
-
Controlled components: The form input's value is controlled by the React state.
-
Uncontrolled components: The form input's value is handled by the DOM itself, using refs to access the value.
14. What is Prop Drilling and how to avoid it?
Answer: Prop drilling is when you pass data through multiple components just to reach a deeply nested component. You can avoid prop drilling by using Context API, or state management tools like Redux.
15. What is Redux and how is it used with React?
Answer: Redux is a state management library for JavaScript apps. It provides a centralized store for all components to access or update the global state. In React, you can integrate Redux using react-redux to access the store via Provider and connect components or useSelector and useDispatch hooks.
16. What is React Router?
Answer: React Router is a standard library for routing in React applications. It enables navigation between different components, managing the URL and rendering the appropriate view for that URL.
17. What is the purpose of key in React lists?
Answer: Keys help React identify which items have changed, are added, or are removed. They are used for efficiently updating the UI when rendering lists of elements.
18. What is useRef hook in React?
Answer: useRef is a hook that allows you to persist values across renders without causing re-renders. It can also be used to directly access DOM elements.
19. What is the difference between useEffect and useLayoutEffect?
Answer:
-
useEffect: Runs after the render and doesn't block the painting of the UI. -
useLayoutEffect: Runs synchronously after all DOM mutations but before the browser paints, which can block the UI update.
20. What are Higher-Order Components (HOC)?
Answer: HOCs are functions that take a component and return a new component with additional props or functionality. They are used to reuse logic across components, such as authentication checks or logging.
These answers cover a wide range of basic to intermediate React.js concepts that are typically asked in interviews.