Frontend Interview

What is React's Virtual DOM and what benefits does it provide?

The Virtual DOM is a lightweight copy of the actual DOM that React uses to optimize rendering. When state changes, React first updates the Virtual DOM, compares it with the real DOM (diffing), and then only updates what's necessary in the real DOM. Benefits: Improved performance, cross-platform compatibility, and better state management.

Explain the difference between props and state in React

Props are read-only data passed from parent to child components, while state is mutable data managed within a component. Props are used for component communication, state for component-specific data that can change.

What is the difference between Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in Next.js?

SSR generates HTML on the server for each request, providing better SEO and initial page load. CSR renders content in the browser, offering better interactivity after initial load. SSR is better for content-heavy sites, CSR for highly interactive applications.

Explain useEffect and its dependency array

useEffect is a hook for handling side effects in React components. The dependency array determines when the effect runs: empty array runs once on mount, no array runs on every render, array with values runs when those values change. Used for data fetching, subscriptions, or DOM manipulations.

How would you implement authentication using AWS Cognito in a Next.js app?

1. Initialize AWS Amplify with Cognito credentials 2. Use Auth.signIn() for login 3. Create protected routes using Higher Order Components 4. Store tokens in secure cookies 5. Handle session management with Cognito's built-in methods.

What are JWT tokens and how do they work?

JSON Web Tokens are encoded strings containing user information and signatures. They consist of header, payload, and signature. Used for stateless authentication, where the server doesn't need to store session information.

How would you optimize the performance of a Next.js application?

1. Use Image component for automatic optimization 2. Implement code splitting 3. Use dynamic imports 4. Enable static generation where possible 5. Implement caching strategies 6. Minimize JavaScript bundles 7. Use production builds

What is code splitting and why is it important?

Code splitting breaks down your code into smaller chunks that load on demand. This improves initial load time by only loading necessary code, reducing the main bundle size and improving performance.

How would you embed a Tableau dashboard into a React application?

1. Import Tableau's JavaScript API 2. Create a component wrapper 3. Use useRef to target container 4. Initialize viz object 5. Handle events and filters 6. Implement error boundaries 7. Manage dashboard loading states

Explain how to integrate Google Analytics with React

1. Install GA package 2. Initialize in _app.js or main component 3. Create custom events 4. Use React Router hooks to track page views 5. Implement event tracking HOC 6. Set up error tracking 7. Test tracking implementation

Compare different state management solutions in React

1. useState: Local component state 2. useContext: Shared state without prop drilling 3. Redux: Complex global state with middleware 4. Zustand: Simple global state 5. Jotai: Atomic state management. Choose based on app complexity and team needs.

What is prop drilling and how can you avoid it?

Prop drilling occurs when props are passed through multiple components that don't need them. Solutions: 1. Use Context API 2. Implement state management libraries 3. Component composition 4. Custom hooks 4. State lifting

Explain the purpose of AWS S3, ECS, and RDS

S3: Object storage for files and static assets. ECS: Container orchestration service for Docker. RDS: Managed relational database service. They work together to create scalable web applications.

How would you set up a CI/CD pipeline for a Next.js application?

1. Version control with Git 2. Configure build process 3. Set up testing environment 4. Create deployment scripts 5. Configure AWS services 6. Set up monitoring 7. Implement rollback strategy

How would you handle form validation in React?

1. Create form state with useState 2. Implement validation logic 3. Display error messages 4. Use onBlur for real-time validation 5. Prevent submission if invalid 6. Optional: Use form libraries like Formik or React Hook Form

Explain React's Error Boundary concept

Error Boundaries are components that catch JavaScript errors in child components, log errors, and display fallback UI. They prevent entire app crashes by containing errors to specific components.