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 useState hook. The validate function checked for empty fields and updated the error state accordingly. The handleSubmit function 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 useState for managing the remaining time and timer state (running/stopped), useRef for persisting the interval ID, and useEffect for cleanup. The startTimer function initiates the countdown, updating the timeLeft state every second. The stopTimer function clears the interval, halting the countdown. The formatTime function 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.