1. What is React?
Answer:React is a JavaScript library for building user interfaces, maintained by Facebook. It allows developers to create large web applications that can update and render efficiently in response to data changes.
2. What are the features of React?
Answer: JSX, Components, Virtual DOM, One-way Data Binding, and Performance.
3. What is JSX?
Answer: JSX stands for JavaScript XML. It allows you to write HTML in React. JSX makes it easier to write and add HTML in React.
4.What is the virtual DOM?
Answer: The virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize rendering by only updating parts of the DOM that have changed.
5. What are components in React?
Answer: Components are the building blocks of a React application. They can be class components or functional components.
6. What is a state in React?
Answer: State is an object that represents the parts of an app that can change. Each component can have its own state.
7. What is a prop in React?
Answer: Props (short for properties) are read-only attributes used to pass data from parent to child components.
8. What is the difference between state and props?
Answer: State is managed within the component (mutable), while props are passed to the component (immutable).
9.What is a functional component?
Answer: A functional component is a JavaScript function that returns a React element.
10. What is a class component?
Answer: A class component is a JavaScript class that extends React.Component and must contain a render method.
11. What are lifecycle methods in React?
Answer: Lifecycle methods are special methods in class components that run at different stages of a component’s lifecycle, like componentDidMount, componentDidUpdate, and componentWillUnmount.
12. What is the use of useState hook?
Answer: useState is a React hook that lets you add state to functional components.
13. What is the use of useEffect hook?
Answer: useEffect is a React hook that lets you perform side effects in functional components, such as data fetching, directly in the component.
14. How do you handle forms in React?
Answer: Forms in React are typically handled using controlled components, where the form data is managed by the component state.
15. What is React Router?
Answer: React Router is a standard library for routing in React. It enables navigation among different components in a React application, allowing the app to have single-page navigation without refreshing the page.
16.What are Higher Order Components (HOC)?
Answer: HOCs are functions that take a component and return a new component with additional props or behavior.
17. What is Context API?
Answer: Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.
18. What are React Fragments?
Answer: React Fragments let you group a list of children without adding extra nodes to the DOM.
19. What is Redux?
Answer: Redux is a state management library for JavaScript apps, often used with React to manage the app’s state in a more predictable way.
20. What is a pure component?
Answer: A pure component is a class component that implements shouldComponentUpdate with a shallow prop and state comparison.
21. What is the difference between componentWillMount and componentDidMount?
Answer: componentWillMount is invoked immediately before mounting occurs, while componentDidMount is invoked immediately after a component is mounted.
22. What is the purpose of shouldComponentUpdate?
Answer: shouldComponentUpdate allows you to prevent unnecessary renders by returning false when the component’s output does not depend on the current change in state or props.
23. What is React Fiber?
Answer: React Fiber is a complete rewrite of React’s core algorithm for rendering and reconciliation, enabling better handling of animations, layout, and gestures.
24. What are controlled components?
Answer: Controlled components are input elements whose values are controlled by React state.
25. What are uncontrolled components?
Answer: Uncontrolled components are input elements that manage their own state internally.
26. What is the key prop and why is it important?
Answer: The key prop is a special attribute used to identify elements in a list, helping React optimize rendering by keeping track of elements.
27. How can you optimize performance in a React application?
Answer: Use React’s PureComponent, React.memo, code-splitting, lazy loading, and avoiding unnecessary renders by using shouldComponentUpdate or React.memo.
28. What is code-splitting in React?
Answer: Code-splitting allows you to split your code into smaller chunks, which can then be loaded on demand. This can improve the performance of your app by reducing the amount of code that needs to be loaded initially.
29. What is lazy loading in React?
Answer: Lazy loading is a technique where components are only loaded when they are needed. React’s React.lazy and Suspense are used for this purpose.
30. What are error boundaries in React?
Answer: Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI.
31. How do you handle side effects in React?
Answer: Side effects are handled using the useEffect hook in functional components and lifecycle methods in class components.
32. What is Prop Drilling and how can it be avoided?
Answer: Prop Drilling is the process of passing data from parent to child components through props. It can be avoided using Context API or state management libraries like Redux.
33. How do you memoize a function in React?
Answer: You can memoize a function using useCallback for functions and useMemo for values to prevent unnecessary recalculations.
34. What is the difference between useEffect and useLayoutEffect?
Answer: useEffect runs asynchronously after render, while useLayoutEffect runs synchronously after all DOM mutations.
35. What is server-side rendering (SSR)?
Answer:
SSR is a technique where the HTML is rendered on the server instead of the client, improving performance and SEO.
36. What is React Hydration?
Answer: React Hydration is the process of reusing the HTML output from the server to bootstrap the client-side React application.
37. What is the difference between for and map in React?
Answer:
In React, map is used to iterate over arrays and return a list of React elements, while for is a JavaScript loop that doesn’t return anything.
38. How do you implement routing in React?
Answer: Routing in React can be implemented using libraries like React Router, which provide components like BrowserRouter, Route, Link, and Switch.
39.What is Redux Thunk?
Answer: Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action, enabling asynchronous logic in Redux.
40. What is React.memo?
Answer: React.memo is a higher order component that memoizes the rendered output of a functional component, preventing unnecessary re-renders.
41.How do you fetch data in React?
Answer: Data can be fetched in React using the fetch API, Axios, or libraries like react-query.
42.What is the difference between component and render props in React Router?
Answer: The component prop expects a React component, while the render prop expects a function that returns a React element.
43.What is the purpose of the withRouter higher order component in React Router?
Answer: withRouter injects the router-related props (history, location, match) into the wrapped component.
44.How do you handle forms with validation in React?
Answer: Forms with validation in React can be handled using libraries like Formik and Yup for schema validation.
45.What is the difference between useState and useReducer?
Answer: useState is best for local state management, while useReducer is preferred for complex state logic or when managing state in a more Redux-like manner.
