harshaktg

Metric	What It Measures	Why It Matters	Target	What Affects It
Largest Contentful Paint (LCP)	How quickly the main content of a page becomes visible to users	This is the moment when users perceive that your page is loaded and usable	Less than 2.5 seconds (ideally under 2 seconds)	• Server response times • Render-blocking resources • Client-side rendering • Resource load times
Interaction to Next Paint (INP)	How quickly your page responds to user interactions	Nothing frustrates users more than clicking a button and seeing nothing happen	Less than 200 milliseconds	• JavaScript execution time • Main thread congestion • Event handler implementation
Cumulative Layout Shift (CLS)	How stable your page is as it loads (i.e., do elements jump around?)	Ever tried to click a button only to have it move at the last second? That frustration drives users away	Less than 0.1	• Image

harshaktg

Feature	Long Polling	Server-Sent Events	WebSockets
Connection Type	New HTTP connection each poll	Persistent HTTP connection	Persistent TCP connection
Data Direction	Client to server, server to client	Server to client only	Bidirectional
Real-time Capability	Low (depends on polling interval)	Medium	High
Battery Efficiency	Poor (uses duplex antenna)	Good (uses receive-only antenna)	Poor (uses duplex antenna)
Implementation Complexity	Low	Medium	High
Automatic Reconnection	No (requires custom implementation)	Yes (built-in)	No (requires custom implementation)
Infrastructure Cost	Low	Medium	High
Header Overhead	High (each request)	Low (initial request only)	Very low (after connection)

harshaktg

import useSWR from "swr";
import "./App.css";

function App() {
  // Fetcher function
  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  // SWR implementation
  const { data, error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts/1",

harshaktg

import { useState, useLayoutEffect } from "react";
import * as ReactDOM from "react-dom";

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    console.log("=== click ===");
    fetchSomething().then(() => {

harshaktg

import "./App.css";
import Home from "./Home";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Home />
      </header>
    </div>

harshaktg

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
import { AmplifySignOut, withAuthenticator } from "@aws-amplify/ui-react";
Amplify.configure(awsExports);

const Home = (props) => {
  return (
    <div>
      <AmplifySignOut />
      <h1>This is your logged in page.</h1>

harshaktg

import useAxios from './useAxios';

const App = () => {
  const { response, error, loading } = useAxios({
    method: 'POST',
    url: '/posts',
    headers: {
      accept: '*/*',
    },
    data: {

harshaktg

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = (params) => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

harshaktg

import useAxios from './useAxios';

const App = () => {
  const { response, error, loading } = useAxios();
  return (
    <div className="app">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div>

harshaktg

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

const useAxios = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);