Skip to main content

React Interview Questions

  1. What is React and how it is different from Angular and Vue?
  2. What is virtual DOM and what how it differs from the real DOM ?
  3. What is JSX? Does the browser understand it ? (Hint: The browser doesn’t understand the JSX. The browser simply makes use of createElement method in React to convert the JSX into plain JavaScript object and that’ how the JS Engine understands and compile it)
  4. Explain the react lifecycle ad its order (https://reactjs.org/docs/react- component.html#the-component-lifecycle)
  5. Re-rendering in React how we can stop it. Hint (learn React.PureComponent, ShouldComponentUpdate method and React.memo)
  6. Higher Order Components in React with example
  7. Render props
  8. State and props with example
  9. Explain setState method in class components and how it updates the state? (Hint: setState takes a function which accepts the previousState and update the current state)
  10. Data binding in React
  11. What is the use of keys in React?
  12. Synthetic events
  13. What are hooks in React?
  14. Fetch data from an API (https://jsonplaceholder.typicode.com/)
  15. React. Fragment and <> </> let you render multiple components/elements in React
  16. How can you pass data from child to parent component and vice versa?
  17. useMemo vs useCallback with example
  18. useState vs useReducer
  19. Context API vs Redux. When to use either one
  20. Controlled vs uncontrolled forms in React
  21. Explain different types of hooks eg) useState, useEffect, useMemo, useCallback, useReducer, useRef etc.
  22. What is useEffect and how it works?
  23. Context API
  24. What is Redux?
  25. Explain the Redux flow
  26. Explain the terms in Redux like action types, reducer, store and middlewares
  27. What is Redux Thunk and what is its use?
  28. Can we directly update the state in Redux? (Hint: we can’ t, we always make a copy of the state and update it)
  29. useSelector and useDispatch (Redux hooks)
  30. What is tree Shaking?
  31. What is React.lazy and React.suspense?
  32. What can we do to optimize a React application? (Hint: we can use optimization techniques such as React.PureComponents, useMemo, useCallback, React.Memo, tree shaking, React.lazy and React.suspense)
  33. Can we use setState inside of render() method? (Hint: we can’t , it’ll lead the application to infinite loop)
  34. Accessibility in React (https://reactjs.org/docs/accessibility.html#why- accessibility)
  35. Web performance in React (https://reactjs.org/docs/optimizing- performance.html#gatsby-focus-wrapper)
  36. Optimization in React
  37. setTimeout & setInterval working in useEffect
  38. Redux vs Context
  39. Redux Saga vs Redux Thunk
  40. Custom Hook
  41. React Coding /Machine Round:
    1. Todo List
    2. Calendar
    3. Accordion
    4. Infinite Scrolling
    5. Pagination
    6. Tabs
    7. Calendar
    8. Star Rating
    9. Tic Tac Toe
    10. Progress Bar
    11. Traffic Lights
    12. Typeahead/autocomplete
    13. Stopwatch
    14. Countdown timer
    15. Dynamic Form
    16. Counter App
    17. Transfer List
    18. Menu Explorer (VSCode type) Nested structure
    19. UseClickedOutSide custom hook
    20. useFetchData custom hook
    21. Image Carousal
  42. Rendering Patterns:
    1. Client-side Rendering
    2. Incremental Static Generation
    3. Progressive Hydration
    4. Selective Hydration
    5. React Server Components
    6. Server-side Rendering
    7. Static Rendering
    8. Streaming Server-Side Rendering
  43. Design Patterns
    1. Compound Pattern
    2. Hooks Pattern
    3. Container/Presentational
    4. Render Props