My Mphasis Interview Experience | Senior Frontend Developer (React.js)
Overview
This document outlines the interview experience for a Senior Frontend Developer (React.js) role. The evaluation focused on core JavaScript concepts, React fundamentals, and the candidate's ability to implement practical solutions. The interview incorporated technical questions and coding exercises to assess both theoretical knowledge and practical application.
Interview Rounds
The interview process included questions spanning various aspects of frontend development:
Round 1: Technical Questions and Coding
-
Form Validation in React (No External Libraries):
The candidate was asked to implement form validation in React without using external libraries. The solution involved managing form data and error states using React's
useStatehook. Thevalidatefunction checked for empty fields and updated the error state accordingly. ThehandleSubmitfunction triggered validation and displayed an alert upon successful submission. The following code illustrates the implementation:const FormValidation = () => { const [formData, setFormData] = useState({ name: '' }); const [errors, setErrors] = useState({}); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value, }); }; const validate = () => { let tempErrors = {}; if (!formData.name.trim()) { tempErrors.name = 'Name is required'; } setErrors(tempErrors); return Object.keys(tempErrors).length === 0; }; const handleSubmit = (e) => { e.preventDefault(); if (validate()) { alert('Form submitted successfully!'); console.log(formData); setFormData({ name: ''}); setErrors({}); } }; return ( <div style={{ maxWidth: '400px', margin: 'auto' }}> <h2>Form Validation</h2> <form onSubmit={handleSubmit} noValidate> <div> <label>Name:</label> <input name="name" value={formData.name} onChange={handleChange} type="text" /> {errors.name && <p style={{ color: 'red' }}>{errors.name}</p>} </div> <button type="submit" style={{ marginTop: '10px' }}> Submit </button> </form> </div> ); }; export default FormValidation; -
JavaScript Event Loop:
The candidate was questioned on the JavaScript Event Loop. The Event Loop is a mechanism that enables non-blocking, asynchronous operations in JavaScript, a single-threaded language. Async functions are offloaded to the browser or Node.js APIs. The callback is pushed to a queue, and the Event Loop checks the call stack. If the call stack is empty, the Event Loop takes the first task from the queue and pushes it onto the call stack to execute.
-
Synchronous vs. Asynchronous Code:
The interviewer probed the difference between synchronous and asynchronous code execution.
-
Countdown Timer Coding Challenge:
The candidate was tasked with creating a countdown timer in React, featuring Start and Stop functionality. The timer was initialized to 5 minutes (300 seconds). The solution employed
useStatefor managing the remaining time and timer state (running/stopped),useReffor persisting the interval ID, anduseEffectfor cleanup. ThestartTimerfunction initiates the countdown, updating thetimeLeftstate every second. ThestopTimerfunction clears the interval, halting the countdown. TheformatTimefunction converts seconds to MM:SS format. Here's the code:import React, { useState, useEffect, useRef } from 'react'; const CountdownTimer = () => { const [timeLeft, setTimeLeft] = useState(300); // 5 minutes = 300 seconds const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); // Start timer const startTimer = () => { if (!isRunning && timeLeft > 0) { setIsRunning(true); intervalRef.current = setInterval(() => { setTimeLeft(prev => { if (prev <= 1) { clearInterval(intervalRef.current); setIsRunning(false); return 0; } return prev - 1; }); }, 1000); } }; // Stop timer const stopTimer = () => { clearInterval(intervalRef.current); setIsRunning(false); }; // Cleanup on unmount useEffect(() => { return () => clearInterval(intervalRef.current); }, []); // Format seconds to MM:SS const formatTime = (seconds) => { const min = String(Math.floor(seconds / 60)).padStart(2, '0'); const sec = String(seconds % 60).padStart(2, '0'); return `${min}:${sec}`; }; return ( <div> <h1>Countdown: {formatTime(timeLeft)}</h1> <button onClick={startTimer} disabled={isRunning || timeLeft === 0}> Start </button> <button onClick={stopTimer} disabled={!isRunning}> Stop </button> </div> ); }; export default CountdownTimer; -
React Fiber:
The candidate was also asked about React Fiber. Fiber enables React to pause, split, abort, or resume rendering work, improving efficiency and responsiveness. It essentially splits large rendering jobs into smaller chunks, allowing the UI to remain responsive even with complex components.
Round 2: Resume and Project Discussion
The second round involved questions based on the candidate's resume and recent projects, allowing for a deeper understanding of their experience and skills.
Key Takeaways
This interview process emphasized both theoretical knowledge and practical skills in React and JavaScript. The candidate was expected to demonstrate a strong understanding of core concepts and the ability to apply them in coding challenges. The interview also assessed the candidate's experience through discussions about their resume and projects.
Original Source
This experience was originally published on medium. Support the author by visiting the original post.
Read on medium