🚀 React Interview Experience (July 2025): Sparx IT

Overview

This document outlines a React developer interview experience at Sparx IT in July 2025. The interview process assessed the candidate's knowledge of various frontend technologies and concepts. The questions spanned fundamental CSS principles to advanced React features and tooling.

Interview Rounds

The interview included questions across a broad spectrum of frontend development topics. Here's a breakdown:

• CSS Fundamentals: Questions focused on line-height, pseudo-classes/elements, positioning (relative, absolute, fixed, sticky), SASS/SCSS, and responsive design techniques.

• React Core Concepts: The candidate was questioned on useEffect cleanup functions, the difference between useReducer and useState, Redux workflow, static site generation (SSG), server-side rendering (SSR), and updates in React 19.

• Next.js: The interviewer explored the reasons for using Next.js, highlighting its SSR/SSG capabilities and built-in features.

• React Component Communication: Questions addressed passing data from child to parent components using callback functions and the purpose of forwardRef.

• Code Optimization: Code splitting was discussed as a performance optimization technique.

• TypeScript: The interviewer assessed the candidate's understanding of interfaces and type annotations.

• JavaScript Fundamentals: The questions covered prototypes, Axios interceptors, event bubbling, hoisting, and object manipulation.

Here's a detailed list of questions:

CSS

1. What is line-height in CSS?
2. What are pseudo-classes and pseudo-elements in CSS? Give Examples.
3. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?
4. What is SASS/SCSS?
5. What is rem in CSS?
6. How would you make a website responsive?

React

7. What is the use of return inside useEffect?
8. Difference between useReducer and useState.
9. Explain the workflow of Redux.
10. What is static site generation (SSG)?
11. What is server-side rendering (SSR)?
12. What all has been updated in React 19?
13. Why do we use Next.js?
14. How would you pass data from child to parent in React?
15. What is forwardRef in React?
16. Explain CodeSplitting.

TypeScript

17. What are interfaces in TypeScript?
18. What will be the type of anchor tag in TypeScript?

General

19. How would you create a React app?
20. What are prototypes?
21. What are interceptors in axios?

JavaScript Output Based Questions

22. What will be the output of:

<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">Click!</button>
  </div>
</div>

23. What will be the output of:

function foo() {
 employeeId();
 var product = 'Car'; 
 return;
  function employeeId() {
  console.log(product);
 }
}
foo();

24. What will be the output of:

(function () {
 var objA = Object.create({ foo: 'foo' });
 var objB = objA;
 objB.foo = 'bar';
 delete objA.foo;
 console.log(objA.foo); 
 console.log(objB.foo);
}());

25. What will be the output of:

const a = {};
const b = { key: 'b' };
const c = { key: 'c' };
a[b] = 123;
a[c] = 456;
console.log(a[b]);

26. What will be the output of :

var obj = {
  message: 'Hello',
  innerMessage: function () {
    (function () {
      console.log(this.message);
    }());
  }
};
console.log(obj.innerMessage());

Key Takeaways

• A strong understanding of CSS fundamentals is crucial for frontend development roles.
• React developers should be well-versed in core concepts like state management, component communication, and performance optimization.
• Experience with Next.js and TypeScript is highly valued for building modern React applications.
• A solid foundation in JavaScript, including prototypes, event handling, and asynchronous operations, is essential.
• Being able to predict the output of JavaScript code snippets is a common assessment technique.