Frontend Developer Interview Questions: React, JavaScript & More

Expert Answer: Functional components are simpler, use hooks for state management (useState, useEffect), and have better performance optimization with React.memo. Class components use this.state and lifecycle methods. Modern React prefers functional components for their simplicity and hooks-based approach.

Example: "I migrated our dashboard from class to functional components. The functional version was 30% less code and easier to test. Using useState for state and useEffect for side effects, we improved component readability and leveraged React.memo to prevent unnecessary re-renders, boosting performance significantly."

Expert Answer: Event delegation leverages event bubbling to handle events efficiently by attaching a single listener to a parent element instead of multiple listeners to child elements. This improves performance, reduces memory usage, and works with dynamically added elements.

Example: "I implemented event delegation for our todo list where users could add/remove items dynamically. Instead of adding click listeners to each todo item, I added one listener to the parent container that checked event.target. This reduced memory usage by 80% and eliminated the need to manage listeners when adding new todos."

Expert Answer: Optimize performance through code splitting, lazy loading, image optimization, efficient bundling, caching strategies, and monitoring Core Web Vitals. Use tools like Lighthouse, webpack-bundle-analyzer, and React Profiler to identify and fix performance bottlenecks.

Example: "I improved our e-commerce site's performance from 2.5s to 800ms load time. Implemented React.lazy for route-based code splitting, added intersection observer for image lazy loading, optimized images to WebP format, and used service workers for caching. These changes improved our Lighthouse score from 65 to 95 and increased conversion rate by 23%."

Expert Answer: React hooks are functions that let you use state and lifecycle features in functional components. Common hooks include useState for state management, useEffect for side effects, useContext for consuming context, and custom hooks for reusable stateful logic.

Example: "I created a custom useLocalStorage hook that combines useState with localStorage synchronization. This hook was reused across 15+ components for persisting user preferences. I also used useEffect with cleanup functions for WebSocket connections and implemented useMemo and useCallback to optimize expensive calculations and prevent unnecessary re-renders in our data visualization components."

Expert Answer: CSS Grid is two-dimensional (rows and columns) and best for page layouts, while Flexbox is one-dimensional (single axis) and ideal for component layouts. Grid excels at complex layouts with precise positioning, while Flexbox is perfect for flexible, responsive component design.

Example: "I used CSS Grid for our dashboard's main layout with header, sidebar, main content, and footer areas. Within each grid area, I used Flexbox for component-level layouts like navigation items and card arrangements. This combination gave us a robust responsive design that works seamlessly from mobile to desktop, reducing CSS complexity by 40%."

Expert Answer: For large applications, use a combination of local component state, Context API for global state, and state management libraries like Redux Toolkit or Zustand. Keep server state separate using React Query or SWR for data fetching and caching.

Example: "I architected state management for a multi-tenant dashboard with Redux Toolkit for global app state, React Query for server state and caching, and local state for component-specific data. This reduced re-renders by 60%, improved data consistency, and made the codebase more maintainable. I also implemented optimistic updates for better UX during API calls."

Expert Answer: A closure is created when an inner function has access to variables from its outer function's scope, even after the outer function has returned. Closures enable data privacy, function factories, and persistent state in functional programming patterns.

Example: "I implemented a rate limiting function using closures for our API calls. The closure maintained a private counter and timestamp, preventing excessive requests. I also used closures in our React hooks for maintaining private state that couldn't be accessed directly from components, ensuring proper encapsulation and preventing state mutation bugs."

Expert Answer: Implement responsive design using mobile-first approach, CSS media queries, flexible grid systems, fluid images, and relative units. Use modern CSS features like Container Queries and clamp() for intrinsic responsive design, and test across multiple devices and screen sizes.

Example: "I built a responsive e-commerce site using mobile-first CSS with progressive enhancement. Used CSS Grid for layout, clamp() for fluid typography, and implemented a custom React hook for media queries. The site works seamlessly from 320px mobile to 4K displays. Added container queries for component-level responsiveness, reducing media query complexity by 50%."

Expert Answer: The Virtual DOM is a JavaScript representation of the real DOM kept in memory. React uses it to optimize updates by calculating the minimum changes needed (diffing) before updating the actual DOM. This batch processing and selective updating improves performance significantly.

Example: "I optimized a data table with 1000+ rows by understanding Virtual DOM behavior. Used React.memo to prevent unnecessary re-renders and implemented proper key props for efficient list updates. When updating a single row, React's diffing algorithm only updated that specific DOM node instead of re-rendering the entire table, reducing update time from 200ms to 5ms."

Expert Answer: Test React components using React Testing Library for integration tests, Jest for unit tests, and tools like MSW for API mocking. Focus on testing behavior rather than implementation, use accessibility-focused queries, and test user interactions and edge cases.

Example: "I established testing standards using React Testing Library with 85% code coverage. Created reusable test utilities for common patterns like form testing and API mocking. Implemented visual regression testing with Storybook and Chromatic for UI components. This testing strategy caught 90% of bugs before production and improved deployment confidence significantly."