Cracking the frontend interview in 2022
It’s hard to find good online resources to prepare for a front-end interview. So here’s my attempt to create one.
Create a reusable stepper component
This question test multiple concepts, like your knowledge of doubly linked list data structure or any other data structure, you come up with to solve this problem. And how well you write an extensible UI component(s) & CSS.
This can be asked to be developed with or without using any UI framework.
Create an image component
This question test multiple areas, like how well you know HTML elements & their attributes. And ways you tackle different edge cases & knowledge about images in general.
Images are the most commonly used HTML element across different websites. And pretty much your website LCP score depends on it a lot.
The interviewer will want you to write the component which shows fallback/placeholder image when image src contains invalid/unreachable URLs. This becomes complex when your website is server-side rendered.
Also, they can ask you how you can lazy load an image on a webpage.
What will be the output of this code & how you can change it to achieve the desired output (i.e 0, 1, 2, 3, 4)
TP-Link TL-WA850RE N300 Wireless Range Extender, Broadband/Wi-Fi Extender, Wi-Fi Booster/Hotspot…
TP-LINK TL-WA850RE is designed to conveniently extend the coverage and improve the signal strength of an existing…
Create an observable & subscribe to it
What is a render tree?
Asked mostly in conjunction with the performance questions.
Write your own custom bind function
This question helps in testing your knowledge on concepts like prototype, bind & this context. Also, similar questions will be to write your own custom setTimeout, map, filter, reduce, call, etc functions.
Create a folder structure with the below-given JSON
DOM tree problem
Given 2 identical DOM tree structures P & Q with root nodes rootP & rootQ & a leaf node “N”, find the value of a corresponding leaf node “M” in DOM tree Q.
Implement sum(1)(2)(3)(4)……(n)() = 1+2+3+4+5+n
Write a function that will sum all the arguments being passed in the above fashion. For e.g sum(1)(2)(3)() will return 6.
This question tests your currying concept & problem-solving skills. And it’s one of the most asked questions in any front-end interview.
Atomic Habits: The life-changing million copy bestseller
' A supremely practical and useful book. James Clear distils the most fundamental information about habit formation, so…
Print all the nested children of a given HTML element
You will be given a parent element, which can be used to find & print all the nested children.
Perform below currying operation
You are given a function const sum = (a, b, c) => a+b+c. Now write a currying function const curriedSum = curry(sum), which will print the sum irrespective of how the arguments are being passed.
console.log(curriedSum(1, 2, 3)) // output 6
console.log(curriedSum(1, 2)(3)) // output 6
console.log(curriedSum(1)(2)(3)) // output 6
Ways you can improve the performance of a web application
You should know about different web vitals & also the techniques to improve the performance of your components and views.
Example: Interviewer can ask you to list down different methods you can adopt to improve TTI or LCP of a website.
Implement infinite scrolling
It’s a technique in which content is loaded continuously as the user scrolls down the page.
Here is the very basic implementation of infinite scrolling in React, in which 50 items are loaded as a batch on reaching the end of the page.
How will you implement a fetch with a timeout functionality
This is to test your knowledge about AbortController.
Write a feature flag component, which can be used to wrap multiple feature implementations & can be toggled based on the flag value.
This can be asked to be developed in React, vanilla JS, or other frameworks you are comfortable with.
So based on flag name & value, we need to render only a specific feature/component.
Note: Flag values can be derived from some backend service API
SSR and CSR
The interviewer can ask this question to understand your knowledge about server-side rendering and client-side rendering. And what to use when.