Skip to content

Instantly share code, notes, and snippets.

@AkshayHere
Last active January 18, 2026 16:33
Show Gist options
  • Select an option

  • Save AkshayHere/f2e6e23470bc19802caeb9c0ef2186bc to your computer and use it in GitHub Desktop.

Select an option

Save AkshayHere/f2e6e23470bc19802caeb9c0ef2186bc to your computer and use it in GitHub Desktop.
React Performace Optimization - Client Side

React & Javascript Interview Questions

Miscellaneous Top Picks

This is the bunch of interview questions that are must to check if you are taking interviews. Several concepts like hoisting, Temporal Dead Zone (TDX), implicit type coercion, etc can be learned here with examples

Javascript Interview Questions - Github

Execution Order of Microtasks and Macrotasks

Event Loops

Micro Tasks

Check explaination here

setTimeout(() => console.log(1));
Promise.resolve().then(() => console.log(2));
Promise.resolve().then(() => setTimeout(() => console.log(3)));
new Promise(() => console.log(4));
setTimeout(() => console.log(5));
// Ans: 4 2 1 5 3

apply, bind and call function in javascript

Resource Hints

  1. preload: Allows resources which are initiated via CSS and JavaScript to be preloaded and define when each resource should be applied.Sets resource priority, determine resource type, determine if the request is compliant with the content security policy (CSP).
  2. prefetch: This will do a DNS lookup before the page is loaded so that the site is readily loaded. Fetch resources in background and store them in browser cache. a. Link prefetching: fetch and store resources in browser cache b. DNS prefetching: perform DNS Lookups on a page in the background with user is browsing. c. Prerendering (prerender): Loads the entire page in the background with all the assets.
  3. preconnect: (DNS + TCP + TLS) Setup an early connections before an HTTP request is actually sent to the server. Improves performance by avoiding latency in subsequent calls.

Explanation

preconnect vs dns-prefetch resource hints

React Performance

Preloading Resources - faster initial pageloads

HTTP Headers

Key value pair of data that carry metadata about request and response

  1. Request headers (sent by client): Host, User-Agent, Accept, Authorization, Cookie, etc
  2. Response headers (sent by server): Content-Type, Content-Length, Cache-Control, etc
  3. General headers (used with both request and response): Date, Connection
  4. Security related headers: CSP, HSTS, CORS

HTTP Strict Transport Security (HSTS)

Content Security Policy (CSP)

React Interview Questions

https://github.com/sudheerj/reactjs-interview-questions?tab=readme-ov-file#what-is-react

vite.new/start

React Performace Optimization - Client Side

React Virtualization

Optimize the page rendering when loading large dataset by displaying only the items that are visible on the screen.

Librarys: react-window, react-virtualized

List Virtualization in React

Optimizing React Performance with Virtualization: A Developer's Guide

React IndexedDB

Database on client level

Pros: Transactional, Asynchronous, indexes added by default, data stored as key value pairs

IndexedDB with React Hooks

Persisting State in IndexedDB Without Breaking the Browser

Lazy Loading in React

Performance optimization by loading limited data. Components and modules are loaded asynchronously so that perfance is maintained.

We achieve that by using React.lazy and Suspense

Lazy Loading in React


React HTTP Caching

https://react.dev/reference/react/cache

https://www.geeksforgeeks.org/reactjs/caching-data-with-react-query-and-hooks/


React In memory Caching

Creating map objects to store data and see if we can retrieve data faster

https://dev.to/vijendra/how-to-do-in-memory-caching-using-reactjs-3p55



requestIdleCallback

Progressive Page Loading technique. idle-until-urgent pattern. The task will wait until listed as urgent.

Non critical tasks are run only once the browser is idle state.

Similar to setTimeout and setInterval

Used for loading analytics like page views, click trackers

https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback

https://dev.to/hexshift/how-to-use-requestidlecallback-for-efficient-background-tasks-in-javascript-151g

https://medium.com/@abhi.venkata54/optimizing-react-app-performance-with-idle-until-urgent-deferring-non-critical-work-cbe168027938

Code Splitting & Lazy Loading

Dynamic Imports

React splits the javascript bundle into smaller chunks and make sure that each bundle is called asynchronously with the help of lazy and suspense feature

https://medium.com/@rajeshwari.2342002/code-splitting-and-lazy-loading-in-react-a-comprehensive-guide-01f237c7a10e

Treeshaking: Remove unused code from your applications. Tools like Webpack can help achieve this automatically.

Debounce & Throttle

Instead of making api calls for every keypress, we will make api calls after a certain interval after keypress

Throttle and Debounce works the same. Throttle will call the function after the interval regularly. Wont reset the interval value. Debounce reset the interval value after each function call

https://www.developerway.com/posts/debouncing-in-react

React Hydration (SSR)

Server side rendering (SSR). Its the process by which React attaches itself to HTML component on client side.

https://dev.to/jitendrachoudhary/what-is-react-hydration-2bc3

https://medium.com/@ogundipe.eniola/react-19-updates-resource-preloading-hydration-error-reporting-and-custom-elements-8486ba180137

Look for topics in this page - Layout Thrashing, Reflow, Repaint https://mikitaaliaksandrovich.substack.com/p/react-nextjs-dom-performance-interview

This is important URL check that out https://www.debugbear.com/blog/forced-reflows

https://web.dev/articles/simplify-paint-complexity-and-reduce-paint-areas

React Query vs React SWR

https://dev.to/rigalpatel001/react-query-or-swr-which-is-best-in-2025-2oa3

Web and Service Workers in React

Web worker is a javascript script that run in background without affecting the main thread Eg: Load 10MB image without blocking UI

Service workers background script that acts as a proxy between your web app and the internet Eg: Push notiifcations, offline support etc

https://dev.to/muhammed_fayazts_e35676/web-workers-vs-service-workers-in-react-a-complete-guide-with-use-cases-2po7

Optimize Images

Responsive Images

Performance Metrics

LCP (Largest Contentful Paint) INP (Interaction to Next Paint) CLS (Cumulative Layout Shift)

Tools Chrome DevTools Performance tab Lighthouse React Profiler

React Security Vulnerabilities

https://github.com/InfoSecWarrior/Penetration-Testing-Interview-Questions/blob/main/Web-Security.md`

SSRF (Server-Side Request Forgery) is a critical web security vulnerability where an attacker tricks a server into making unauthorized HTTP requests on their behalf. Attacker convinces server to get restricted info acting like an authenicated user. Issues: Account Takeover, Privilage Escalation Prevention: Mange Allowed IPs, Block Internal IPs, use HTTPS, etc

CSRF (Client Side Request Forgery) is a web security vulnerability where an attacker tricks a logged-in user’s browser into making unauthorized requests to a trusted website without the user’s consent. Browser automatically passes value to server to process request without user authorization. Issues: Financial Fraud, Account Modifications, Data Modifications Prevention: SameSite Cookies, Custom Headers, CSRF Tokens, use HTTPS, etc

Denial of Service (DoS / DDoS)

Man-in-the-Middle (MITM)

DNS Attacks

IP Spoofing

Packet Sniffing

TCP Attacks

SSL/TLS Attacks

Application level

  1. SQL Injection
  2. Cross-Site Scripting (XSS): when a website allows user input, such as comments, without proper filtering or sanitization. Inject malicious code to client side Prevention: set CSP, HTTPOnly and Secure Cookies for secure HTTPS connections
  3. Cross-Site Request Forgery (CSRF)
  4. Server-Side Request Forgery (SSRF)
  5. Remote Code Execution (RCE)
  6. Insecure Deserialization
  7. HTTP Request Smuggling

Cookie: Attributes of Cookie

XXE: Inject malicious code into XML files

SSL: Secure Socket Layer secure communication to transfer information between server and client Public Key and Private Key

JWT

security headers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment