Question 1

Explain the different states of a Promise in JavaScript and how to chain multiple Promises with then and catch.

Accepted Answer

A Promise is an object that represents the eventual result of an asynchronous operation. It can be in one of four states.

Pending is the initial state. The operation is neither complete nor failed.

Fulfilled means the operation completed successfully and the Promise has a value.

Rejected means the operation failed and the Promise has a reason for failure.

Settled means the Promise is either fulfilled or rejected, but no longer pending.

To create a Promise, you use the Promise constructor.

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (s

Question 2

How does async/await work in JavaScript? Show how to handle errors with try/catch and the best practices.

Accepted Answer

Async/await is a modern syntax for working with Promises. It makes asynchronous code more readable by making it look like synchronous code.

The async keyword declares an asynchronous function. The await keyword pauses execution until the Promise resolves.

async function fetchUserData(userId) {
  const response = await fetch('/api/users/' + userId);
  const user = await response.json();
  return user;
}

An async function always returns a Promise. If you return a value, it is automatically wrapped in Promise.resolve.

async function hello() {
  return 'Hello';
}

// Equivalent

Question 3

When should you use useReducer instead of useState? Explain with a concrete example.

Accepted Answer

useReducer is an alternative to useState for managing complex state. It is particularly useful when the state has multiple sub-values or when the next value depends on the previous one.

Use useState for simple, independent pieces of state.

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [isLoading, setIsLoading] = useState(false);

Use useReducer when the state is complex with multiple related values, when state transitions follow specific logic, or when you want to centralize update logic.

Here is an example with a complex form.

const initia

Question 4

How does useContext help avoid prop drilling? What are the best practices for structuring your contexts?

Accepted Answer

Prop drilling is the problem of passing props through multiple levels of components that do not need them, just to reach a deeply nested child. useContext solves this by allowing components to access shared data directly. The prop drilling problem looks like this. // Without Context: props pass through all levels function App() { const [user, setUser] = useState({ name: 'Alice' }); return

; } function Header({ user }) { return ; } function Navigation({ user }) { return ; // Finally used here! }

Question 5

What are the main state management solutions in React, and when would you use each one?

Accepted Answer

State management in React can be handled in several ways, each suited to different needs.

React native solutions include useState and useReducer for component local state. Use useState for simple state and useReducer for complex state with multiple actions. Context API shares data between components without prop drilling. It is ideal for values that change rarely, like theme or authenticated user.

External libraries offer more options. Redux with Redux Toolkit is the most established solution for large applications. It provides a predictable global state with unidirectional data flow. Re

Question 6

Explain the three fundamental principles of Redux and the concepts of store, actions, and reducers.

Accepted Answer

Redux is a predictable state container based on three fundamental principles.

Principle one is single source of truth. All application state is stored in a single object called the store. This simplifies debugging because you can inspect the complete state at any time.

Principle two is that state is read-only. The only way to change state is to emit an action, an object describing what happened. You never mutate state directly.

Principle three is that changes are made with pure functions. Reducers are pure functions that take the previous state and an action, and return the new state.

Question 7

What are the four fundamental principles of WCAG, and what does each one mean?

Accepted Answer

WCAG, Web Content Accessibility Guidelines, are the international web accessibility standards developed by the W3C. They are organized around four fundamental principles, often memorized with the acronym POUR.

The first principle is Perceivable. Content must be presentable in ways users can perceive. This means providing text alternatives for non-text content, such as alt attributes for images. Provide captions and transcripts for audio and video content. Ensure content is adaptable and can be presented in different ways without losing information. Guarantee sufficient contrast between text

Question 8

What is the role of semantic HTML in accessibility, and which elements should you prioritize?

Accepted Answer

Semantic HTML means using HTML elements for their meaning rather than their appearance. It is the foundation of web accessibility.

This matters because assistive technologies like screen readers interpret HTML structure to present content to users. A button created with a button tag will automatically be announced as a button, be keyboard focusable, and activatable with Enter or Space. A div styled to look like a button will be none of these without additional work.

Structural elements called landmarks allow screen reader users to quickly navigate between sections. These include header f

Question 9

What are Core Web Vitals and why are they important for measuring web application performance?

Accepted Answer

Core Web Vitals are three essential metrics defined by Google to evaluate user experience on the web. These metrics directly impact SEO ranking since 2021.

The three main metrics measure different aspects of user experience.

LCP, or Largest Contentful Paint, measures the loading time of the largest visible element in the viewport. For example, a large hero image or main text block. A good score is under two point five seconds.

FID, or First Input Delay, measures responsiveness, specifically the delay between the first user interaction and the browser response. A good score is under on

Question 10

How do you implement lazy loading for images and components in a React application?

Accepted Answer

Lazy loading defers loading resources until they are needed, reducing initial load time.

For images, there are several approaches. The native HTML attribute loading equals lazy on img and iframe tags has been supported by modern browsers since 2020. This is the simplest and most performant solution.

The Intersection Observer API provides more control. You use this JavaScript API to detect when an element enters the viewport, then load the image dynamically.

Specialized libraries like React Lazy Load Image Component or Lozad offer advanced features like placeholders and transition effe

Frontend Developer

Topics

JavaScript Advanced

React & Hooks

State Management

Accessibility

Performance Optimization

Mock Interview

Quick Stats