Sr. Frontend Interview Questions

sr-frontend-interview-questions-answered.md

Senior Frontend Interview Questions

Some questions about frontend development that might be in your next job interview. The questions were formulated by @mauvieira, a super senior fullstack developer

General Frontend

• What are the strategies we can use to optimize the performance of web applications?

  • CDNs, GraphQL (maybe) to reduce overfetching, improve backend performance, use SSR and/or SSG, lazy loading for loading assets only when it's needed, minimize and compress HTML, CSS and JS files, and optimize images by compressing and resizing them.

• What are Web Vitals (LCP, FID, CLS)? And how are they applied in the real world?

  • Web Vitals are standardized metrics to measure the quality of the navigation inside a website:
    • LCP (Largest Contentful Paint) - LCP measures the time it takes for the largest visible content element to be fully loaded and rendered. A LCP is considered good when it takes less than 2.5 seconds.
    • FID (First Input Delay) - FID measures the time it takes for the browser to respond to the user's first interaction. A FID is considered good when it takes less than 100 milliseconds.
    • CLS (Cumulative Layout Shift) - CLS measures the visual stability of a page by calculating the sum of layout shift scores for all unexpected layout shifts during the entire lifespan of the page.

• What is the WAI-ARIA standard?

  • Web Accessibility Initiative - Accessible Rich Internet Applications, is a technical specification developed by the World Wide Web Consortium (W3C). The purpose of WAI-ARIA is to improve the accessibility of web content and applications, especially for users with disabilities who rely on assistive technologies, such as screen readers or alternative input devices.

• In which cases is it worth building an SPA?

  • Mobile app-like experience and PWA
  • Complex state management, because they are able to maintain persistent state and handle real-time updates
  • Highly interactive user interfaces, because there's no reload, so transitions between views are faster

JavaScript

• What is the advantage of using a Map instead of an object?

  • With maps you can use keys of any type, not only strings as in javascript objects
  • Provides an iterator for easy for-of usage
  • Support millions of items

• What is the difference between Map and WeakMap?

  • WeakMaps keys must be objects. Besides that, WeakMaps have weak references to the keys, so unused keys can be easily removed by the garbage collector

• What are closures? (a very common question)

  • One function that has a function inside, and return it. This technique is used to capture the scope on which they were defined, so you can use variables of that scope outside it.

• What is hoisting?

  • Elevate functions and variables declarations to the "top scope" . This allows you to use a function or a variable before it is defined in your .js file.

• How does equality work in JS? What is the difference between using === and Object.is()?

  • Object.is considers NaN equals to NaN and -0 different than +0.

• What is the purpose of Object.freeze()?

  • Makes an object immutable, preventing it to have its value changed.

• What is the difference between an async-await function and using a chain of .then?

  • Callback hell

• How do generators work?

  • Generators are on-demand functions, they can be paused and resumed, and the state is maintained along these "pauses and resumes". They return a generator object, each key of this object is the result of and yield operation, the last key is the return result.

CSS

• How does CSS-in-JS work?

  • It is an approach that allows writing CSS directly within JavaScript files, making code maintenance and modularization easier.

• Why does Facebook no longer want to follow the same direction as CSS-in-JS?

  • Doesn't generate a static CSS file, it generates a JS file and set all the styles through it, and then the styles interact with the browser through the CSSStyleSheet API. Generating a static CSS file would be more performatic.

• What is the proposal of the Stylex library?

  • It's a library to manage CSS styles in an efficient and modular way.

• How to use nesting with pure CSS only?

  • It's being discussed lately, it's very recent and will be implemented in the next versions. But, so far it's only possible by using CSS preprocessors.

• What are container queries?

  • A way to apply styles based on the container size, instead of the window view size It makes the styles more responsive.

• How does the CSS grid subgrid work?

  • The CSS Grid subgrid feature is an extension of the CSS Grid Layout Module that allows a nested grid to inherit its parent grid's rows or columns. This is especially useful when you want to align the content of nested grid items with the parent grid's structure, without having to duplicate row and column definitions or manage complex positioning with margins or padding.

React

• What is the Virtual DOM? And why is it often more performant than manipulating the "real" DOM?

  • Virtual DOM is a JavaScript object containing a replica to the real DOM, it is capable of making comparisons with the real DOM, and then apply patches avoiding a full re-render in the DOM, rerendering only what have changed.
  • Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory synced with “Real DOM ” by a library such as ReactDOM and this process is called reconciliation
  • Virtual DOM makes the performance faster, not because the processing itself is done in less time. The reason is the amount of changed information – rather than wasting time on updating the entire page, you can dissect it into small elements and interactions

• Explain why the useState hook accepts a function as an initial value

  • To allow the initial value to be calculated only once, instead of every time

• What is the difference between the hooks useState and useReducer?

  • useState is better for simple state management, without too much logic involved, and useReducer was designed to handle complex state logics, and states that requires transition and dispatch actions.

• Under what circumstances does a component re-render in React?

  1. Changes in props: When a component receives new props, it triggers a re-render. This happens even if the new props are the same as the old ones.
  2. Changes in state: When a component's state is updated, a re-render is triggered.
  3. Parent component re-renders: When a parent component re-renders, by default, its child components also re-render.
  4. Context changes: If a component is consuming values from a React context using useContext (in functional components), and the context value changes, the component will re-render.
  5. Using hooks with dependencies: Hooks like useEffect, useMemo, and useCallback accept dependency arrays as their second argument. When any of the listed dependencies change, the effect will run, or the memoized value or callback will be recomputed, potentially causing the component to re-render.

• How can we prevent unnecessary rerenders?

  • React.memo
  • Use the hook dependencies correctly in useCallback, useEffect and useMemo to avoid re-renders
  • For big forms, prefer useRef over useState

• What is the advantage of using the React.memo API?

  • Prevents unnecessary renders when the component's props haven't changed, improving performance

• What are the purposes of the hooks useRef, useMemo, and useCallback ?

  • useRef: Allows you to create a mutable reference object that persists across renders. It is commonly used to store references to DOM elements, but can also be used to store values that should persist without triggering a rerender (input values for example).
  • useMemo: Memoizes a computed value, preventing unnecessary recomputations when dependencies haven't changed. This can improve performance when working with expensive computations that depend on specific prop or state values.
  • useCallback: Memoizes a callback function, ensuring that the same instance of the function is reused across renders unless its dependencies change. This is useful for preventing unnecessary rerenders in child components that receive the callback as a prop.

• What is virtualization? And what is it for?

  • Virtualization is a technique used to optimize the rendering of large lists or grids by only rendering the visible items on the screen. It improves performance by reducing the number of DOM elements created and updated, minimizing memory usage, and reducing layout calculations.

• Explain how the useEffect hook works

  • The useEffect hook is used to perform side effects in functional components, such as fetching data, updating the DOM, or subscribing to events. It takes two arguments: a function that contains the side effect, and an optional dependency array. The effect function runs after the component renders and updates. If the dependency array is provided, the effect will only run when one of the listed dependencies changes. If the array is empty, the effect will run only on mount and unmount.

• How can we do event cleanup in useEffect?

  • By returning a "cleanup function" in the end of the useEffect A cleanup function is a function with a removeEventListener call inside it. As you are returning this cleanup function, the cleanup will happen every time the effect happens (it will vary on the dependencies array of your useEffect)

• What is the recommended way to consume external data in React?

  • useEffect hook to fetch data when the component mounts or when relevant dependencies change. The fetched data can then be stored in the component's state using the useState or useReducer hooks.
  • You can use axios or fetch for consuming REST APIs, and apollo-client , relay or urql if you are consuming a GraphQL API. You can also consume other types of APIs, for example gRPC and SOAP, although these API patterns are not that common in frontend applications.
  • tRPC (t3-app) and server-components (next.js) are a very recent way to consume external data.

• What is the difference between server state and application state?

  • Server state refers to the data stored on the server or external services, typically fetched via APIs.
  • Application state refers to the data that is specific to a user's interaction with the application, such as user preferences, UI state, context or data that is temporarily cached on the client-side.

• How can a React application be deployed without any meta-framework?

  1. Write a build script in the package.json, and also a start build script
  2. Choose a provider that supports a SPA.
  3. Deploy the application through CLI, FTP or git remote repository.
  4. Generate the build
  5. Configure the provider to start the application pointing to the build directory (usually dist)

• What is a meta-framework in the context of web development?

  • Framework built on top of other frameworks or libraries
  • Next.js --> React.js
  • Nuxtjs --> Vue.js
  • NestJS --> Express and Fastify
  • Type-GraphQL --> GraphQL

Next

• What is the difference between getServerSideProps and getStaticProps?

  • getStaticProps - used to get de component props and then render it into a static HTML page at build time
  • getServerSideProps - used to get the component props and then render it into a static HTML page at run time

• What is the purpose of the getStaticPaths function?

  • Is used when your dynamic page has the getStaticProps . Nextjs needs to know what are the possible paths for your dynamic route, sou you map them on the getStaticProps function. You can use getStaticProps without getStaticPaths; getStaticPaths is only a complement in case of dynamic routes

• How does the next/image API work? And why does it improve the app's performance?

  • The image is optimized by the Next.js server, or an external image optimization service. The optimization includes resizing, format conversion (to WEBP), and compression.
  • The optimized image is served to the client with cache headers to enable caching by the browser or a CDN, which can improve performance on subsequent requests.

• Explain how you would deploy a Next application without hosting it on Vercel

  • You can deploy a Next.js application on any platform that supports Node.js, the only difference is that on Vercel this process is automated, is hidden by a great DX.

• How do API routes work?

  • Next.js API routes provide a built-in solution for creating API endpoints within a Next.js application. They are server-side functions that run when a request is made to their corresponding URL. To create an API route, simply create a new file with a .js extension inside the pages/api folder, and export a default request handler function.

• Is it possible to API Routes if the app is not hosted on Vercel?

  • Yes, you can use Next.js API routes even if your app is not hosted on Vercel. API routes work on any platform that supports Node.js, including custom deployments or other hosting providers.

• How can we integrate AMP with Next?

  • You'll need to import the withAmp higher-order component from next/amp and wrap your page component with it.

• What is the advantage of using Serverless mode?

  • Improved scalability, as serverless functions can automatically scale based on demand.
  • Cost efficiency, as you only pay for the compute resources you actually use.
  • Easier deployment and management, as you don't need to manage your own servers or infrastructure.
  • Faster response times due to the serverless functions being deployed closer to the users.

• Is it possible to use a static CDN with Next?

  • Yes, you can use a static CDN with Next.js by configuring the assetPrefix option in your next.config.js file. The assetPrefix should be set to the URL of your CDN.

• Server-side components

  • Server-side components (also known as server components) are a new experimental feature in sReact that allows you to build components that run entirely on the server. They can be used to fetch data, perform server-side rendering, and generate HTML that's sent to the client. Server components can be mixed with client components, allowing you to build a more efficient and interactive user interface while offloading some work to the server. This feature is still experimental and not yet available in a stable release, but you can follow its progress on the React GitHub repository and the official React blog for updates.