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.