Microsoft - Software Engineer II - Frontend
Summary
I interviewed for a Software Engineer II - Frontend role at Microsoft. The interview process involved multiple rounds, focusing on my past projects, web optimization techniques, deep dives into JavaScript execution, and practical React development challenges.
Full Experience
My interview journey for the Software Engineer II - Frontend position at Microsoft consisted of two challenging rounds.
Round 1
The first round kicked off with an in-depth discussion about my previous projects, specifically touching upon various web optimization techniques I had implemented. The interviewer then delved into React internals, asking intricate questions about how useEffect operates and predicting its output from a given code snippet. We also discussed React's batching mechanism for updates. Following this, I was presented with a JavaScript output prediction question involving promises and asynchronous operations:
console.log(1);
setTimeout(() => {
console.log(2);
}, 10);
setTimeout(() => {
console.log(3);
}, 0);
new Promise((_, reject) => {
console.log(4);
reject(5);
console.log(6);
})
.then(() => console.log(7))
.catch(() => console.log(8))
.then(() => console.log(9))
.catch(() => console.log(10))
.then(() => console.log(11))
.then(console.log)
.finally(() => console.log(12));
console.log(13);
The final challenge in this round was to implement a polyfill for React's useEffect hook.
Round 2
The second round started with questions related to web security, testing my knowledge on common vulnerabilities and best practices. Similar to the first round, I was given another JavaScript output prediction question. The main coding challenge for this round was to create a multi-step form in React. This form needed to have different fields across steps, implement various validations (e.g., start date cannot be after end date), and include a "Save Draft" button to persist entered values, alongside a "Final Submit" button for completing the entire form.
Interview Questions (3)
console.log(1);
setTimeout(() => {
console.log(2);
}, 10);
setTimeout(() => {
console.log(3);
}, 0);
new Promise((_, reject) => {
console.log(4);
reject(5);
console.log(6);
})
.then(() => console.log(7))
.catch(() => console.log(8))
.then(() => console.log(9))
.catch(() => console.log(10))
.then(() => console.log(11))
.then(console.log)
.finally(() => console.log(12));
console.log(13);
Predict the output of the given JavaScript code snippet involving promises, setTimeout, and console logging.
Implement a polyfill for React's useEffect hook, demonstrating its core functionality and dependency array handling.
Design and implement a multi-step form in React. Each step should contain several fields with specific validation rules (e.g., start date not after end date). Include a 'Save Draft' button that persists values entered up to the current step, and a 'Final Submit' button for the complete form.