Salesforce Frontend Engineer Interview: Rounds, Questions and Preparation

What the job involves

Frontend Engineers build and maintain the user-facing parts of web applications, focusing on performance, accessibility, and responsive design. In global tech product companies, they work closely with designers, backend engineers, and product managers to ship features that serve millions of users. Day to day involves writing clean JavaScript/TypeScript, debugging UI issues, and optimizing load times.

Role & Technical Knowledge

1. 1

   Explain the difference between `let`, `const`, and `var` in JavaScript.

   Cover scoping (block vs function), hoisting, and temporal dead zone. Mention that `const` prevents reassignment but not mutation of objects.

2. 2

   How does the virtual DOM work in React and why does it improve performance?

   Describe diffing algorithm, batched updates, and how React minimizes direct DOM manipulation. Contrast with direct DOM operations.

3. 3

   What are semantic HTML elements and why are they important?

   Name examples like `<header>`, `<nav>`, `<main>`. Explain benefits for accessibility, SEO, and code readability.

4. 4

   How would you make a website responsive without using a framework?

   Mention media queries, flexible grids, relative units (%, rem, vw), and mobile-first approach. Give a simple example.

Practical Scenarios

1. 5

   You need to fetch data from an API and display it in a list. How do you handle loading and error states?

   Explain using `useState` and `useEffect` (or fetch with async/await), showing conditional rendering for loading spinner and error message. Mention aborting requests on unmount.

2. 6

   A page is loading slowly. What steps would you take to diagnose and fix performance issues?

   Talk about Lighthouse audits, network tab, code splitting, lazy loading images, minification, and reducing re-renders. Prioritize fixes based on impact.

3. 7

   How would you implement a reusable button component that supports different sizes and variants?

   Describe props for size and variant, using CSS classes or styled-components. Mention accessibility (aria-label, disabled state) and avoiding prop drilling.

4. 8

   You need to store user preferences (like theme) across sessions. What approach do you take?

   Suggest localStorage or cookies, with a fallback to system preference. Discuss syncing state with React context and handling SSR if applicable.

Behavioural & HR

1. 9

   Tell me about a time you had to learn a new frontend technology quickly for a project.

   Use STAR method. Highlight resourcefulness, time management, and outcome. Mention specific tech and how you applied it.

2. 10

   Describe a situation where you disagreed with a teammate's UI approach. How did you handle it?

   Show respect, data-driven discussion (e.g., user testing, performance metrics), and willingness to compromise for the best solution.

3. 11

   Why do you want to work as a Frontend Engineer at a global tech company?

   Connect personal interest in user experience with scale and impact. Mention continuous learning and collaboration with cross-functional teams.

4. 12

   How do you ensure your code is accessible to users with disabilities?

   Talk about semantic HTML, ARIA roles, keyboard navigation, color contrast, and testing with screen readers. Show empathy and awareness.

Coding & Problem Solving

1. 13

   Write a function to debounce another function. Explain its use case in frontend.

   Implement with setTimeout and clearTimeout. Use case: search input to limit API calls. Mention leading/trailing options.

2. 14

   Given an array of objects, write code to group them by a property (e.g., group users by city).

   Use `reduce` to build an object with keys as property values. Show clean, readable code and handle edge cases like missing property.

3. 15

   How would you flatten a nested array in JavaScript? Provide at least two methods.

   Mention `Array.prototype.flat(Infinity)` and recursive reduce. Discuss performance and browser support.

4. 16

   Implement a simple counter component in React that increments and decrements. What are potential pitfalls?

   Use `useState` and functional updates to avoid stale state. Pitfall: multiple rapid clicks causing batching issues. Show cleanup if using intervals.