Scribd
Upload
10 views

React Interview Que

Uploaded by

vinayakvyas7489
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

React Interview Que

Uploaded by

vinayakvyas7489
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Fundamental Concepts

1. What is React?
React is a JavaScript library for building user interfaces, developed by Facebook. It is
component-based and allows developers to build reusable UI components.

2. Explain JSX.
JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It is used
with React to describe the UI structure. Browsers can't read JSX directly; it is transpiled to
regular JavaScript using tools like Babel.

3. What is the difference between state and props?

o State: Managed within a component and can be updated.

o Props: Passed from a parent component and are immutable within the child.

4. How does React handle state updates?


React batches state updates and re-renders components efficiently. Updates are triggered
using hooks like useState or methods like setState.

5. What is the lifecycle of a React component?

o Mounting: constructor, getDerivedStateFromProps, render, componentDidMount

o Updating: getDerivedStateFromProps, shouldComponentUpdate, render,


componentDidUpdate

o Unmounting: componentWillUnmount

6. Explain virtual DOM.


The virtual DOM is an in-memory representation of the real DOM. React updates the virtual
DOM first, compares it with the previous version (diffing), and then updates only the
necessary parts of the real DOM (reconciliation).

7. What is the difference between controlled and uncontrolled components?

o Controlled: Form elements are controlled by React state.

o Uncontrolled: Form elements manage their own state via the DOM.

8. How do you handle events in React?


Events are handled using event listeners like onClick, onChange, etc. They are written as
camelCase and passed as functions.

jsx

Copy code

<button onClick={handleClick}>Click me</button>

9. What are higher-order components (HOCs)?


HOCs are functions that take a component and return a new component with additional
props or functionality.
10. What is a render prop?
A render prop is a function passed as a prop to a component, used to dynamically determine
what to render.

jsx

Copy code

<MyComponent render={(data) => <ChildComponent data={data} />} />

React Hooks

11. What are React Hooks?


Hooks are functions introduced in React 16.8 that let you use state and lifecycle features in
functional components.

12. Explain the useState hook.


useState allows you to manage state in a functional component.

jsx

Copy code

const [count, setCount] = useState(0);

13. Explain the useEffect hook.


useEffect allows you to perform side effects like data fetching or subscriptions. It runs after
the render.

14. What is the useContext hook?


useContext is used to consume values from a React context.

15. What is the useReducer hook?


useReducer is an alternative to useState for managing complex state logic.

16. What is the useCallback hook?


useCallback memoizes a function, preventing it from being re-created unless dependencies
change.

17. What is the useMemo hook?


useMemo memoizes the result of a computation to avoid unnecessary recalculations.

18. What is the useRef hook?


useRef provides a mutable object that persists across renders. Commonly used to access
DOM elements.

React Router

19. What is React Router?


A library for handling navigation and routing in React applications.

20. How do you define routes in React Router?


Using the <Route> component within a <Router>.
jsx

Copy code

<Route path="/about" element={<About />} />

21. What is the difference between Route and Switch components?

o Route: Defines a path and component to render.

o Switch: Ensures only the first matching route is rendered.

22. How do you handle nested routes?


Define child routes using a parent <Route> and Outlet.

23. How do you pass parameters to routes?


Use :param in the path and access it via useParams().

jsx

Copy code

<Route path="/user/:id" element={<User />} />

24. How do you handle programmatic navigation in React Router?


Use the useNavigate hook.

Performance Optimization

25. How can you optimize React applications for performance?

o Use React.memo for components.

o Avoid unnecessary renders.

o Use code splitting and lazy loading.

o Optimize images.

26. What is memoization?


A technique to store the result of expensive function calls and reuse them.

27. How can you use React.memo to optimize components?


Wrap components to prevent re-renders when props don’t change.

28. What is lazy loading and code splitting?


Lazy loading dynamically loads components. Code splitting splits the code into smaller
bundles.

29. How can you use the useMemo and useCallback hooks for performance optimization?
Use them to memoize values and functions to prevent unnecessary recalculations or re-
creations.

Advanced Topics
30. What is the difference between class components and functional components?
Class components use lifecycle methods and this. Functional components are simpler and
use hooks.

31. What is the context API?


A way to share data across components without prop drilling.

32. How do you handle errors in React applications?


Use error boundaries or try-catch blocks.

33. What is the difference between shallow comparison and deep comparison?

o Shallow: Compares object references.

o Deep: Compares object values.

34. How do you create custom hooks?


Create a function starting with use and use existing hooks within it.

35. What is React Testing Library?


A testing library for React that focuses on testing user interactions.

36. What is Jest?


A testing framework for JavaScript, commonly used with React.

37. How do you test React components?


Use React Testing Library or Jest to simulate user interactions and assert component
behavior.

38. What is server-side rendering (SSR)?


Rendering React components on the server and sending HTML to the browser.

39. What is static site generation (SSG)?


Pre-rendering pages at build time for faster performance.

40. How do you handle form submissions in React?


Use the onSubmit event handler.

41. What is the difference between componentDidMount and useEffect?


useEffect can replicate componentDidMount when given an empty dependency array.

42. What is the difference between componentDidUpdate and useEffect?


useEffect with dependencies replicates componentDidUpdate.

43. How do you create custom hooks for data fetching?


Encapsulate fetching logic in a custom hook using useState and useEffect.

44. How do you handle asynchronous operations in React?


Use async functions with hooks like useEffect.

45. How do you implement infinite scrolling in React?


Use intersection observers or scroll event listeners to load more data.

46. How do you implement pagination in React?


Divide data into pages and use navigation or buttons to switch between them.
47. How do you handle keyboard events in React?
Use onKeyDown, onKeyPress, and onKeyUp event handlers.

48. How do you handle mouse events in React?


Use onClick, onMouseOver, and similar handlers.

49. How do you handle touch events in React?


Use onTouchStart, onTouchMove, and onTouchEnd handlers.

50. What are some common React best practices?

o Use functional components.

o Avoid prop drilling by using context or state management libraries.

o Write clean, modular code.

o Optimize performance using memoization and lazy loading.

You might also like