Interview Practise Flashcards
What is React, and what are its key features?
Explain declarative views, component-based architecture, Virtual DOM, and unidirectional data flow.
- JavaScript library for UI
- Virtual DOM: React uses a lightweight in-memory representation of the DOM to update only the necessary parts efficiently, improving performance.
- Single Page Application (SPA) is a web app that loads a single HTML page and dynamically updates its content as the user interacts
- Component-Based Architecture: Applications are built as reusable, independent components, promoting modularity and ease of maintenance.
-Unidirectional Data Flow: Data flows in a single direction, from parent to child components, ensuring predictable updates and easier debugging.
What is JSX, and why is it used?
Discuss how JSX combines HTML and JavaScript for component rendering and its necessity for React.createElement.
- It allows developers to write HTML-like code within JavaScript, combining markup and logic in one file.
- JSX is transpiled into regular JavaScript by tools like Babel, enabling browsers to interpret it.
What is the Virtual DOM, and how does it improve performance?
Explain its role in reconciling changes with minimal real DOM updates.
What are the differences between functional and class components?
Highlight the simplicity of functional components and the introduction of hooks vs. lifecycle methods in class components.
How does state differ from props in React?
Discuss immutability of props and the mutable nature of state, including their roles in component behavior.
What is prop drilling, and how do you handle it?
Mention Context API or state management libraries (Redux, Zustand) to manage deeply nested props.
What are React Hooks, and why were they introduced?
Focus on state and lifecycle management in functional components, mentioning useState, useEffect, etc.
How does the useEffect hook work, and what are its common use cases?
Explain dependency arrays, cleanup functions, and scenarios like data fetching or event listeners.
What is the Context API, and when would you use it?
Discuss global state management for prop drilling avoidance.
the Context API and useContext are related but not the same.
The Context API is the entire system provided by React to manage and share state or data globally across components without passing props through every level of the tree.
How does React handle component re-rendering, and how can you optimize it?
Mention memoization (React.memo, useMemo, useCallback) and key props for efficient updates.
What are Higher-Order Components (HOCs) and Render Props?
Explain how these patterns enhance component reusability and encapsulate logic.
What are React portals, and why are they used?
Discuss rendering child components outside the DOM hierarchy.
What are some methods to improve the performance of a React application?
Talk about lazy loading, code splitting, React Profiler, memoization, and optimizing dependencies in useEffect.
What is the difference between controlled and uncontrolled components?
Explain form data handling via React state (controlled) vs. direct DOM manipulation (uncontrolled).
How would you test a React component?
Cover tools like Jest, React Testing Library, and the importance of unit, integration, and snapshot testing.
