React.JS Interview Questions

React Interview Questions for Freshers

1. What is React?
2. What are the advantages of using React?
3. What are the limitations of React?
4. What is useState() in React?
5. What are keys in React?
6. What is JSX?
7. What are the differences between functional and class components?
8. What is the virtual DOM? How does React use the virtual DOM to render the UI?
9. What are the differences between controlled and uncontrolled components?
10. What are props in React?
11. Explain React state and props.
12. Explain about types of side effects in React component.
13. What is prop drilling in React?
14. What are error boundaries?
15. What is React Hooks?
16. Explain React Hooks.
17. What are the rules that must be followed while using React Hooks?
18. What is the use of useEffect React Hook?
19. Why do React Hooks make use of refs?
20. What are Custom Hooks?

---

React Interview Questions for Experienced

21. Explain Strict Mode in React.
22. How to prevent re-renders in React?
23. What are the different ways to style a React component?
24. Name a few techniques to optimize React app performance.
25. How to pass data between React components?
26. What are Higher Order Components (HOCs)?
27. What are the different phases of the component lifecycle?
28. What are the lifecycle methods of React?
29. Does React Hook work with static typing?
30. Explain about types of Hooks in React.
31. Differentiate React Hooks vs Classes.
32. How does the performance of using Hooks differ in comparison with classes?
33. Do Hooks cover all the functionalities provided by classes?
34. What is React Router?
35. Can React Hook replace Redux?
36. Explain conditional rendering in React.
37. Explain how to create a simple React Hooks example program.
38. How to create a switching component for displaying different pages?
39. How to re-render the view when the browser is resized?
40. How to pass data between sibling components using React Router?
41. How to perform automatic redirect after login?

Answers:

1. What is React?
   

   • Fronted, Open-source
   • single page application, Complex and Reusable UI.
   • Features: SSR Support, Virtual DOM, Unidirectional Data Flow, Reusable Components.

2. What are the advantages of using React?
   

   • Virtual DOM for efficiency.
   • Component-based architecture for reusability.
   • Strong community support and ecosystem.
   • Easy integration with other libraries and frameworks.
   • SEO-friendly with server-side rendering (SSR).

3. What are the limitations of React?
   

   • Only handles the UI layer, requiring additional libraries for complete solutions.
   • Steeper learning curve for beginners.
   • Frequent updates can lead to compatibility issues.
   • JSX syntax may be unfamiliar to new developers.

4. What is useState() in React?
   

   • A Hook that allows you to add state to functional components.
   • Returns a stateful value and a function to update it.

5. What are keys in React?
   

   • Unique identifiers for elements in a list.
   • Help React identify which items have changed, are added, or are removed.

6. What is JSX?
   

   • A syntax extension for JavaScript that looks similar to XML or HTML.
   • Used to describe the UI structure in React components.

7. What are the differences between functional and class components?
   

   • Functional components are simpler and use Hooks for state and lifecycle methods.
   • Class components are more complex and use this keyword for state and lifecycle methods.

8. What is the virtual DOM? How does React use the virtual DOM to render the UI?
   

   • A lightweight copy of the actual DOM.
   • React updates the virtual DOM first, then efficiently updates the actual DOM based on differences.

9. What are the differences between controlled and uncontrolled components?
   

   • Controlled components have their state managed by React.
   • Uncontrolled components manage their own state using the DOM.

10. What are props in React?
    

    • Short for “properties,” props are read-only attributes passed from parent to child components.

11. Explain React state and props.
    

    • State is a mutable data structure that holds information about the component’s current situation.
    • Props are immutable and used to pass data from parent to child components.

12. Explain about types of side effects in React component.
    

    • Data fetching, subscriptions, and manually changing the DOM are common side effects.

13. What is prop drilling in React?
    

    • The process of passing props through multiple levels of components to reach a deeply nested component.

14. What are error boundaries?
    

    • React components that catch JavaScript errors anywhere in their child component tree and display a fallback UI.

15. What is React Hooks?
    

    • Functions that let you use state and other React features in functional components.

16. Explain React Hooks.
    

    • Built-in Hooks: useState, useEffect, useContext, etc.
    • Custom Hooks: User-defined functions that use built-in Hooks to encapsulate reusable logic.

17. What are the rules that must be followed while using React Hooks?
    

    • Only call Hooks at the top level of a component or custom Hook.
    • Only call Hooks from React functional components or custom Hooks.

18. What is the use of useEffect React Hook?
    

    • Manages side effects in functional components, such as data fetching or subscriptions.

19. Why do React Hooks make use of refs?
    

    • Refs provide a way to access DOM nodes or React elements directly.

20. What are Custom Hooks?
    

    • Functions that allow you to reuse stateful logic across multiple components.

21. Explain Strict Mode in React.
    

    • A tool for highlighting potential problems in an application.
    • Helps identify unsafe lifecycles, legacy API usage, and other issues.

22. How to prevent re-renders in React?
    

    • Use React.memo for functional components.
    • Implement shouldComponentUpdate in class components.
    • Use useCallback and useMemo Hooks to memoize functions and values.

23. What are the different ways to style a React component?
    

    • Inline styles, CSS stylesheets, CSS Modules, Styled-components, Emotion, Tailwind CSS.

24. Name a few techniques to optimize React app performance.
    

    • Code splitting, lazy loading, memoization, virtualization, and optimizing state management.

25. How to pass data between React components?
    

    • Using props, context API, or state management libraries like Redux.

26. What are Higher Order Components (HOCs)?
    

    • Functions that take a component and return a new component with enhanced functionality.

27. What are the different phases of the component lifecycle?
    

    • Mounting, Updating, Unmounting.

28. What are the lifecycle methods of React?
    

    • componentDidMount, componentDidUpdate, componentWillUnmount, etc.

29. Does React Hook work with static typing?
    

    • Yes, React Hooks can be used with TypeScript for static typing.

30. Explain about types of Hooks in React.
    

    • Built-in Hooks: useState, useEffect, useContext, useReducer, etc.
    • Custom Hooks: User-defined functions that use built-in Hooks.

31. Differentiate React Hooks vs Classes.
    

    • Hooks allow functional components to have state and lifecycle methods, while classes use this keyword.

32. How does the performance of using Hooks differ in comparison with classes?
    

    • Hooks can lead to cleaner and more efficient code, but performance differences are generally negligible.

33. Do Hooks cover all the functionalities provided by classes?
    

    • Yes, Hooks provide equivalent functionality to class components.

34. What is React Router?
    

    • A library for handling routing in React applications, allowing navigation between different components.

35. Can React Hook replace Redux?
    
    

    • React Hooks can manage local state, but Redux is still useful for complex global state management.

36. Explain conditional rendering in React.
    

    • Rendering different components or elements based on certain conditions using JavaScript operators like if, &&, and ? :.

37. Explain how to create a simple React Hooks example program.
    

    • Create a functional component, use useState to manage state, and useEffect for side effects.

38. How to create a switching component for displaying different pages?
    

    • Use React Router to define routes and switch between components based on the URL.

39. How to re-render the view when the browser is resized?
    

    • Use the useEffect Hook to add an event listener for the resize event and update state accordingly.

40. How to pass data between sibling components using React Router?
    

    • Use URL parameters or query strings to pass data between sibling components.

41. How to perform automatic redirect after login?
    

    • Use React Router’s useNavigate Hook to programmatically navigate to a different route after a successful login.