InterviewRecap Logo
InterviewRecap
InterviewRecap Logo
InterviewRecap

HackerEarth Frontend Engineer Interview Experience

Frontend Engineer

HackerEarth
July 22, 2026
15 Questions
Not Selected

Summary

AI Powered

The HackerEarth interview process involved a single round and covered a broad range of topics related to CSS, JavaScript, and React. Candidates can expect questions focused on event handling, CSS layout properties, and the workings of React hooks and components. Overall, the interview presented a moderate difficulty level, challenging candidates to demonstrate both their technical knowledge and practical coding skills.

1

ROUND 1

#1

CSS Flexbox Wrapping

Given a parent container with `display: flex`, how would you make the children wrap to the next line, while ensuring each child takes 1/3 of the available width and all children have equal widths?
Css
Flexbox
Medium
#2

JavaScript Event Propagation

Explain event propagation in JavaScript. What are event bubbling and event capturing, and how do they differ? How can you implement both?
Javascript
Event Propagation
Medium
#3

Nested Click Handlers and Event Order

Given the following nested elements and click handlers, what will be the output when clicking the inner element? Explain the order of execution for both event bubbling and event capturing, and modify the code to demonstrate both behaviors.
Javascript
Event Propagation
Medium
#4

Centering a Child Element in CSS

Given a parent <div> and a child <div>, how would you center the child horizontally and vertically inside the parent using CSS?
Css
Easy
#5

Var Scope in Event Handlers

What will be the output of the following code that attaches click handlers inside a for loop using var? Why does it happen? How would you fix it so that clicking each button correctly prints 0, 1, and 2?
Javascript
Scoping
Medium
#6

CSS Specificity and Selectors

Given the following HTML and CSS rules, what will be the final color of the 'Hi' text? Explain why by discussing CSS specificity, selector priority, and how the result changes if the CSS rules are rearranged.
Css
Specificity
Medium
#7

Understanding Array.prototype.reduce()

Explain how JavaScript's Array.prototype.reduce() works. What are the roles of the accumulator, current element, and initial value? Walk through the given example.
Javascript
Arrays
Medium
#8

Implementing Custom Reduce Function

Implement your own version of Array.prototype.reduce() (myReduce). Explain why extending Object.prototype is not recommended, and implement it correctly by extending Array.prototype, including support for an optional initial value.
Javascript
Array Methods
Hard
#9

Understanding 'this' in Callbacks

In the following object, why does this.name become undefined inside the forEach callback? Explain the value of this and fix the code without introducing any additional variables.
Javascript
This
Medium
#10

React useMemo Functionality

Consider the following React component using useMemo. Why might useMemo not behave as expected in this example? Explain how useMemo works, what dependency arrays do, and when useMemo should or should not be used.
React
Optimization
Medium
#11

Understanding React.memo

What is React.memo()? Explain what problem it solves, how it works internally, and what the optional comparison function (isEqual) is used for. Also, explain the difference between React.memo() and useMemo().
React
Performance
Medium
#12

Creating a Custom React Hook

Create a custom React hook that synchronizes a state value with localStorage. The hook should: - Read the initial value from localStorage - Keep React state and localStorage in sync - Return the current value and a setter function - Handle changes to the storage key correctly.
React
Hooks
Hard
#13

Event Delegation in a List

Given the following <ul> with multiple <li> elements, add a single event listener to the parent <ul> that logs the clicked <li> using event delegation. Explain why event delegation is preferred over attaching listeners to every <li>.
Javascript
Event Delegation
Medium
#14

Using useMemo in React

Explain the purpose of useMemo(). When should it be used, and when can it actually hurt performance?
React
Performance
Medium
#15

Understanding Differences Between useMemo and React.memo

Explain the purpose of React.memo(). How is it different from useMemo(), and in what scenarios would you choose one over the other?
React
Performance
Medium
CssJavascriptReactHooksEvent DelegationHackerearth
A

Anonymous

Anonymous User

AI Powered

Share Your Story

Share your interview in your own words — our AI handles the rest. Hardly takes 2 minutes.

Mock Interviews & 1:1 Guidance

Practice mock interviews or book a 1:1 call for career guidance, resume reviews, and more.

AI Interview Prep

AI interview prep powered by real interview data.

Show Your Love!

Connect with us on social media