Scribd Logo
Upload

Welcome to Scribd!

  • 13 views

    React_Interview

    Uploaded by

    imran

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    React_Interview

    Uploaded by

    imran
    13 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    13 views5 pages

    React_Interview

    Uploaded by

    imran

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 5

    Basics of React

    1. What is React?
    React is a JavaScript library developed by Facebook for building user interfaces, primarily
    using a component-based architecture.

    2. What are the features of React?


    Key features include virtual DOM, JSX syntax, component-based structure, unidirectional
    data flow, and support for hooks.

    3. Explain the difference between a class component and a functional component.


    Class components use class syntax and lifecycle methods, whereas functional components
    use functions and React hooks for state and lifecycle management.

    4. What is JSX?
    JSX is a syntax extension for JavaScript that allows writing HTML-like syntax directly in
    JavaScript code.

    5. What are props in React?


    Props (short for properties) are immutable inputs passed from parent to child components to
    communicate and customise behavior.

    Advanced Topics

    6. What is the virtual DOM, and how does it work?


    The virtual DOM is a lightweight copy of the actual DOM; React updates it first and syncs
    changes efficiently with the real DOM.

    7. What is state in React?


    State is a local, mutable data store managed within a component that determines how the
    component renders and behaves.

    8. Explain React lifecycle methods.


    Lifecycle methods, like componentDidMount and shouldComponentUpdate, control
    component behavior during mounting, updating, and unmounting.

    9. What is the use of useState in React?


    The useState hook enables adding state to functional components, returning the state
    variable and a function to update it.

    10. What is the Context API?


    The Context API is a way to share data globally across components without passing props
    manually at every level.

    Performance and Optimisation

    11. How does React handle performance optimisation?


    React optimises performance using techniques like virtual DOM, React.memo, lazy loading,
    and code splitting.

    12. What is React.memo, and how does it work?


    React.memo is a higher-order component that prevents unnecessary re-renders by
    memoising a component’s output.

    13. Explain lazy loading in React.


    Lazy loading dynamically loads components or routes as needed, reducing initial loading time
    and improving performance.

    14. What is the difference between a controlled and uncontrolled component?


    Controlled components have their state managed by React, while uncontrolled components
    rely on DOM for their state.

    15. What is the significance of keys in React?


    Keys help React identify and manage individual elements efficiently during reconciliation.

    Hooks

    16. What are React Hooks?


    Hooks are functions like useState and useEffect that let you manage state and lifecycle in
    functional components.

    17. What is useEffect used for?


    useEffect handles side effects in functional components, like fetching data or subscribing to
    events.

    18. Explain the difference between useEffect and useLayoutEffect.


    useEffect runs asynchronously after render, while useLayoutEffect runs synchronously after
    layout calculation.

    19. What is useRef in React?


    useRef is a hook that allows creating a mutable object reference, often used to access DOM
    elements directly.

    20. How does useReducer work?


    useReducer is an alternative to useState for managing complex state logic using a reducer
    function.

    Routing

    21. What is React Router?


    React Router is a library for managing navigation and routing in React applications.

    22. What is the difference between BrowserRouter and HashRouter?


    BrowserRouter uses clean URLs with history API, while HashRouter uses URL hashes for
    navigation.

    23. What are dynamic routes in React Router?


    Dynamic routes allow matching URL parameters, enabling rendering different components
    based on the URL.

    24. What is the use of useNavigate in React Router v6?


    useNavigate replaces useHistory for programmatic navigation in React Router v6.

    25. How can nested routes be implemented in React?


    Nested routes are implemented by defining child <Route> components inside a parent
    <Route> component.

    State Management

    26. What is Redux?


    Redux is a state management library for React that centralises application state in a single
    store.

    27. What are the core principles of Redux?


    Redux follows three principles: a single source of truth, state is read-only, and state changes
    through pure reducers.

    28. What is the use of connect in Redux?


    The connect function links React components to the Redux store, providing state and
    dispatch as props.

    29. What is Redux middleware?


    Redux middleware, like Thunk or Saga, intercepts actions and enables asynchronous logic
    between dispatching and reducers.

    30. What is the difference between Redux and Context API?


    Redux is a full-fledged state management library, while Context API is simpler but suitable for
    lightweight state sharing.

    Error Handling and Testing

    31. How do you handle errors in React components?


    Use error boundaries (componentDidCatch or ErrorBoundary components) to catch
    JavaScript errors in the UI.

    32. What is Jest in React?


    Jest is a testing framework used for unit and snapshot testing of React components and
    applications.

    33. What is the use of Enzyme?


    Enzyme is a testing utility for React that simplifies shallow, mount, and render testing.

    34. How do you test React components?


    React components can be tested using tools like Jest, Enzyme, or React Testing Library for
    unit and integration tests.

    35. What is snapshot testing in React?


    Snapshot testing captures the rendered component's output and ensures it doesn’t change
    unexpectedly.

    Miscellaneous

    36. What are higher-order components (HOC)?


    HOCs are functions that take a component and return an enhanced version of it, often used
    for reusing logic.
    37. What is reconciliation in React?
    Reconciliation is the process React uses to update the DOM efficiently by comparing the
    virtual DOM with the real DOM.

    38. What is the difference between React and React Native?


    React is for web development, while React Native is for building mobile applications using
    React concepts.

    39. What is the importance of PropTypes?


    PropTypes validate props passed to components, ensuring they have the correct types and
    values.

    40. What is the role of strict mode in React?


    React’s StrictMode helps identify potential problems in an application by running checks in
    development mode.

    Advanced Topics

    41. What is React Suspense?


    React Suspense enables waiting for asynchronous operations (like lazy loading) before
    rendering components.

    42. How do you optimise React applications for SEO?


    Use server-side rendering (SSR) with libraries like Next.js for better SEO performance.

    43. What is Next.js?


    Next.js is a React framework for building server-rendered or statically generated web
    applications.

    44. What is the use of portals in React?


    Portals enable rendering components outside their parent DOM hierarchy.

    45. What is the Fiber architecture?


    React Fiber is an internal engine that enables better reconciliation and improves React's
    rendering performance.

    Practical Scenarios

    46. How to manage large-scale state in React applications?


    Use state management libraries like Redux or MobX, or split state into localised slices using
    hooks.

    47. How do you handle large data rendering in React?


    Use techniques like pagination, infinite scrolling, and libraries like React Virtualized to
    optimise rendering.

    48. What are controlled forms in React?


    Controlled forms have input values managed entirely by React state, offering more control
    and validation options.

    49. How does React differ from Angular?


    React is a library focusing on the view layer, while Angular is a comprehensive framework for
    building entire applications.
    50. What is the role of webpack in React?
    Webpack bundles JavaScript, CSS, and assets into a single file, optimising React applications
    for deployment.

    You might also like