In simple terms, rate limiting means limiting the number of requests per second that a user or client can send to the server.

If a user crosses this limit, the server rejects the request.

The HTTP status code used for rate limiting is 429 – Too Many Requests.

Why We Use Rate Limiting

We use rate limiting to save our server from abuse. Otherwise, any random hacker or bot can flood our system with requests, and actual users will not be able to use the application. This directly leads to business loss.

So rate limiting is put in place to protect our servers.

Algorithms For Rate Limiting

Token Bucket

In token bucket algorithm:

• We have a bucket with a fixed number of tokens, for example 2 tokens
• Each request needs 1 token to get processed

So:

• First request comes → token is assigned → request is processed
• Second request comes → token is assigned → request is processed

Now the bucket is empty.

When the third request comes:

• There is no token available
• The request is rejected with 429 (Too Many Requests)
  or the client retries after some time

Tokens refill
            (fixed rate)
                 ↑
        +------------------+
        |   TOKEN BUCKET   |
        |   [ 2 Tokens ]  |
        +------------------+
              |   |
              |   |
        Req 1 |   | Req 2
              v   v
         +----------------+
         |  API SERVER    |
         +----------------+

Req 3 (no token available)
        |
        v
   ❌ Rejected (429)
   or client retries later

Important points:

Token bucket does not keep requests in a queue

Tokens are added back to the bucket at a fixed rate

This algorithm allows burst traffic

class TokenBucket {
  constructor(capacity, refillRatePerSecond) {
    this.capacity = capacity;           // max tokens
    this.tokens = capacity;              // current tokens
    this.refillRate = refillRatePerSecond;
    this.lastRefillTime = Date.now();
  }

  refill() {
    const now = Date.now();
    const elapsedSeconds = (now - this.lastRefillTime) / 1000;

    const tokensToAdd = elapsedSeconds * this.refillRate;
    this.tokens = Math.min(this.capacity, this.tokens + tokensToAdd);

    this.lastRefillTime = now;
  }

  allowRequest() {
    this.refill();

    if (this.tokens >= 1) {
      this.tokens -= 1;
      return true; // request allowed
    }

    return false; // rate limited
  }
}

Leaky Bucket

In leaky bucket algorithm:

• All incoming requests are put into a bucket (queue)
• Requests are processed at a fixed rate, for example 2 requests at a time

So:

• Even if many requests come together
• Server will process only 2 requests per second
• Remaining requests wait in the queue

If:

• The bucket becomes full
• Extra requests are dropped

Important points:

• Leaky bucket does not allow burst traffic
• It provides a smooth and constant request flow

Key Difference

• Token Bucket → allows burst, no queue
• Leaky Bucket → smooth output, uses queue

Why Rate Limiting Matters in Real Systems

Quick Question: How does YouTube handle multiple video uploads while protecting its servers from abuse?

Answer: How YouTube Handles Multiple Uploads

When many users upload videos at the same time:

User uploads a video from the web or mobile

Video is uploaded in chunks (small parts)

The request first goes to the load balancer

The load balancer sends a request to the available upload server

The upload server only accepts and stores the video

Heavy work, like video processing, happens later in the background

This way, thousands of users can upload videos at the same time without blocking the system.

User
  |
  v
[ Load Balancer ]
  |
  v
[ Upload Servers ]  ← stateless, scalable
  |
  v
[ Temporary Storage ]
  |
  v
[ Queue / Events ]
  |
  v
[ Video Processing Workers ]

How YouTube Stays Safe from Server Abuse

If there is no protection, any hacker or bot can flood the system and real users will not be able to upload videos, which causes business loss.

So YouTube uses multiple layers of protection.

1. Rate Limiting

• Limits number of requests per second per user/IP
• If limit is crossed → request rejected

Status code used: 429 (Too Many Requests)

2. Upload Quotas

• Daily upload limit per account
• New accounts get lower limits
• Trusted users get higher limits

3. Authentication

• Only logged-in users can upload
• Each request is verified using tokens

4. Isolation

• Upload servers only accept files
• Processing happens separately
• Even if uploads spike, core system stays safe

Abuse Protection Diagram

User Request
     |
     v
[ Rate Limiter ]
     |
     v
[ Auth Check ]
     |
     v
[ Quota Check ]
     |
     v
[ Load Balancer ]
     |
     v
Upload Server

Keep learning.
Keep developing.
And don’t settle for shallow explanations.

Come back when you want to level up again 🙂

Rate Limiting for Beginners: Why It’s Needed and How It Works was originally published in CodeX on Medium, where people are continuing the conversation by highlighting and responding to this story.

📋 Overall Process:
Technical Round 1
Technical Round 2
HR Round

💻 Technical Round 1
1. Explain the difference between var, let, and const and how scoping affects closures.
2. What are pure functions and how do they improve maintainability in React applications?
3. How does React Fiber enhance rendering performance?
4. What’s the difference between virtual DOM and real DOM?
5. How do you optimize React re-rendering — besides using React.memo()?
6. What are Higher-Order Components (HOCs) and how do they differ from hooks?
7. How would you manage global state across multiple components without Redux?
8. What are child processes in Node.js and how do you use them for heavy computations?
9. How do you manage rate limiting in Express to prevent abuse?
10. Explain the concept of circular dependencies in Node.js and how to resolve them.
11. Explain MongoDB indexing strategies and their trade-offs.
12. How do you handle large file uploads or streaming data in Node.js?

💡 Scenario-Based Questions
13. A React form is re-rendering on every keystroke — how do you optimize it?
14. A MongoDB query is taking too long — how do you debug and optimize it?
15. You discover memory leaks in your Node.js app. How do you identify and fix them?

💻 Technical Round 2
1. How would you structure a microservices architecture for a multi-tenant SaaS platform?
2. Explain how to implement API Gateway + Authentication + Rate Limiting in Express.
3. Discuss different caching layers (Redis, CDN, browser caching) and where to apply each.
4. How would you ensure observability in a distributed MERN app (logging, tracing, metrics)?
5. How can you use Docker and Kubernetes to scale your Node.js services?
6. What strategies do you use to secure APIs from XSS, CSRF, and injection attacks?
7. How do you implement role-based access control (RBAC) in your MERN stack app?

💡Scenario-Based Questions (System Design Level)
8. Your React app bundle has grown too large, causing slow load times. Describe how you’d analyze and reduce it.
9. You need to integrate a third-party API with strict rate limits — how would you design your system?
10. How would you implement real-time notifications efficiently for thousands of connected clients?
11. How do you ensure database consistency and rollback when multiple services are involved in a transaction?

In this post, we are going to learn about both Authorization and Authentication in GraphQL.

Most developers coming from the REST API world would find this hard to comprehend, like how is it even possible. Authorization in GraphQL is different and can be done in many ways, but authentication is the same as we have in REST.

Let’s see them both in the below sections.

Authentication

Authentication is the process of verifying the identity of a user in a system. To verify the user’s identity, the user must supply a token or a key which the server will use to retrieve the user’s info from its databank. if the user’s info is in the databank then, the user is authenticated, that is, the user is allowed inside the system. If not, the server will tell the user that he is not authenticated and won’t be allowed access to the system.

Now, if a user is not authenticated, he has to request for registration via a registration form provided by the system. If the user’s token has expired, he has to request for a new token via the system’s login form.

There are ways in which we can authenticate users but the easiest and the most secured way is via JWT (JSON Web Token).

JWT

JWT is an open standard way in which information can be securely communicated between two entities. The information being transmitted is in a compact JSON object.

JSON has three parts:

• Header: This contains the type of token used in signing the JWT and the signing algorithm being used, e.g HS256, etc.
• Payload: This contains a statement about an entity. This statement is called a claim. There are different types of claims, registered, public or private claims.
• Signature: This is generated by signing the encoded header, encoded payload, a secret, and the algorithm specified in the header.

The final JWT output is three Base64-URL strings separated by dots.

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwczovL3NwYWNlYXBpLmNvbS9ncmFwaHFsIjp7InJvbGVzIjpbImFzdHJvbmF1dCJdLCJwZXJtaXNzaW9ucyI6WyJyZWFkOm93bl91c2VyIl19LCJpYXQiOjE1OTQyNTI2NjMsImV4cCI6MTU5NDMzOTA2Mywic3ViIjoiNjc4OTAifQ.Z1JPE53ca1JaxwDTlnofa3hwpS0PGdRLUMIrC7M3FCI

You must be wondering what do we do with this string of random texts and numbers in the authentication. The data in the custom claim in the payload is generated for a particular when the user signs up in our system. The generated JWT is sent to the client.

The client stores this JWT in the browser, JWTs are mostly saved in the localStorage, though it depends on the choice of the developer. For each request to the server, this JWT is sent along with each request. There are many forms you can use to send the JWT, but most commonly it is appended in the Authorization header in a Bearer type authentication just like this:

{

  "headers": {

    "Authorization": "Bearer xxxxx.yyyyy.zzzz"

  }

}

The server will then retrieve the JWT token from the Authorization header, decode it to verify the user’s identity, to check that the user is already registered in the system.

Authenticating GraphQL is quite simple. We make use of queries and mutations. For a user to have access he has to register first, that’s why we have register pages on almost all websites. The registration hits a particular endpoint, for example, it is usually like this https://URL_HERE/register API in a REST endpoint. For signing in, it usually in a URL like this: https://URL_HERE/login in a REST endpoint.

🔒 Authorization in GraphQL

Once a user is authenticated (we know who they are), the next step is authorization — deciding what they are allowed to do.

Authentication: “Who are you?” ✅

Authorization: “What can you access?” 🔑

🧩 How Authorization Works

Authorization usually involves a few common patterns:

1. Role-Based Access Control (RBAC)
   Users have roles like admin, editor, or reader.
   Each resolver checks the role before allowing access.
   Example: Only admin can delete blog posts, but editor can create them.
2. Field-Level Permissions
   Sometimes, only certain fields should be visible to certain users.
   Example: salary or email fields might be hidden for normal users but visible to admin.
3. Ownership Checks
   Some actions depend on whether the user owns the data.
   Example: Users can edit their own blog posts but not others’ posts

⚡ Implementing Authorization Conceptually

In GraphQL, you don’t need separate endpoints for different roles. Instead:

1. Pass the user object from authentication (JWT decoded) into the context of Apollo Server.
2. In each resolver, check the user’s role or ownership before executing the action.
3. Return an error if the user isn’t authorized.

So you flow becomes:

1. Client sends JWT in the Authorization header.
2. Server decodes JWT → knows who the user is.
3. Resolver checks permissions → allows or denies the operation.

Promises are key to mastering async code in JavaScript. This blog will help you understand them quickly, boost your confidence, and make your code cleaner and more efficient!

🔷 What is Promises?

A Promise is just an object that represents a future value.

It can be:

• Pending (….waiting)
• Resolved (success)
• Rejected (failure)

const promise = new Promise((resolve, reject) => {
  if (true) {
    resolve('Success');
  } else {
    reject('Error');
  }
});

promise.then(result => console.log(result)); // "Success"
promise.catch(error => console.log(error));  // if error

🔷 What is async/await?

• async/await is just a prettier way to write promises.
• Instead of using .then(), you can pause code execution with await.

Example:

async function getData() {
  try {
    const result = await promise;   // waits until promise resolves
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

✅ await waits for the promise to resolve and then continues.
✅ try-catch handles errors when using await.

🔥 KEY POINTs:

• await only works inside an async function.
• await does NOT block the whole program — it just pauses the current function until the Promise resolves.
• Promises and async/await are both based on microtasks queue (executed after current synchronous code).

🚀 So quickly answer the Bonus Q:

What will be the output of the following ?…..

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

Correct Output:

1
4
3
2

Explaination…….

Synchronous code runs first.
Then, the microtask queue (Promises) runs before the macrotask queue (setTimeout). 🕹️

Let’s dive deep into Promises and explore everything you need to know…

Promise Chaining: ⛓️

Promises allow you to chain multiple .then() calls together. This is incredibly useful when you have a series of asynchronous tasks that need to run one after another.

new Promise((resolve, reject) => {
  resolve(5);
})
  .then((result) => {
    console.log(result);  // 5
    return result * 2;    // Returns a new value to be passed to the next .then()
  })
  .then((result) => {
    console.log(result);  // 10
    return result + 3;
  })
  .then((result) => {
    console.log(result);  // 13
  })
  .catch((error) => {
    console.log(error);
  });

Promise Methods

1. Promise.all()

Promise.all() is used to wait for multiple promises to resolve. It takes an array of promises and returns a single promise that resolves when all the promises are fulfilled.

let promise1 = Promise.resolve(3);
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));
let promise3 = 42;

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log(values); // [3, "foo", 42]
  })
  .catch((error) => {
    console.log(error); // If any promise fails, this will be called
  });

If any promise rejects, the entire Promise.all() rejects with that error.

2. Promise.race()

Promise.race() takes an array of promises and returns a promise that resolves or rejects as soon as one of the promises resolves or rejects.

let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'first'));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'second'));

Promise.race([promise1, promise2])
  .then((value) => {
    console.log(value); // 'second' (the fastest promise)
  })
  .catch((error) => {
    console.log(error);
  });

It resolves or rejects as soon as the first promise resolves or rejects, regardless of the others.

3. Promise.allSettled()

Promise.allSettled() returns a promise that resolves after all of the input promises have settled, whether they are fulfilled or rejected.

let promise1 = Promise.resolve(42);
let promise2 = new Promise((resolve, reject) => reject('Error'));
let promise3 = new Promise((resolve, reject) => resolve('Success'));

Promise.allSettled([promise1, promise2, promise3]).then((results) => {
  console.log(results);
  // [
  //   { status: "fulfilled", value: 42 },
  //   { status: "rejected", reason: "Error" },
  //   { status: "fulfilled", value: "Success" }
  // ]
});

Useful when you want to know the final state of each promise (whether fulfilled or rejected), but you don’t care if one fails.

4. Promise.any()

Promise.any() returns a promise that resolves as soon as one of the input promises resolves, or rejects if all promises are rejected.

let promise1 = Promise.reject('Error 1');
let promise2 = Promise.reject('Error 2');
let promise3 = Promise.resolve('Success');

Promise.any([promise1, promise2, promise3])
  .then((value) => {
    console.log(value); // 'Success'
  })
  .catch((error) => {
    console.log(error); // Only triggered if all promises reject
  });

If all promises reject, it will return a AggregateError.

Conclusion:

Promises are essential for working with asynchronous code in JavaScript. With Promise chaining and the various Promise methods, you can handle complex async workflows efficiently.

• async/await is just syntactic sugar over promises, but promises themselves are powerful tools for managing async operations.
• Promise.all(), Promise.race(), Promise.allSettled(), and Promise.any() offer flexibility in handling multiple async tasks.

Now that you’ve got a solid understanding of async/await and Promises, let’s go for something even more challenging! 🔥

Consider the following code….

console.log('start');

async function task1() {
  console.log('task1 start');
  await task2();
  console.log('task1 end');
}

async function task2() {
  console.log('task2 start');
  await task3();
  console.log('task2 end');
}

async function task3() {
  console.log('task3 start');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('task3 end');
}

task1();

console.log('end');

Comment your answer……

Happy coding :)

In today’s fast-paced digital world, applications generate massive amounts of data every second. From user clicks and sensor readings to financial transactions and social media interactions, managing this continuous stream of information is crucial. This is where Apache Kafka comes into play.

What is Kafka, Really?

Apache Kafka is not just another technology — it’s a distributed streaming platform that has revolutionized how modern applications handle real-time data. Think of Kafka as a high-speed, fault-tolerant messaging system that can handle millions of messages per second.

Lets see some key characters tics of kafka

Key Characteristics

• Distributed: Works across multiple servers
• Scalable: Can handle tremendous amounts of data
• Fault-Tolerant: Continues working even if some components fail
• Real-Time: Processes data almost instantly

Core Concepts: Breaking Down Kafka’s Architecture

1. Topics

A topic in Kafka is like a category or feed name to which records are published. Imagine it as a pipeline where data flows…

Example Topics:
- user_logins
- product_purchases
- sensor_readings

2. Producers and Consumers

• Producers: Applications that send (publish) data to Kafka topics
• Consumers: Applications that read (subscribe) data from topics

3. Brokers and Clusters

• A broker is a single Kafka server
• A cluster is a group of brokers working together
• Provides high availability and load balancing

Now let see some Real-World Use Cases

1. Microservices Communication

Kafka enables different services to communicate without direct coupling:

• User registration service publishes to a topic
• Analytics service consumes from the same topic
• Notification service also consumes the topic

2. Event Tracking

• E-commerce platforms track user interactions
• Social media platforms monitor real-time engagement
• IoT devices send continuous sensor data

3. Log Aggregation

Collect logs from multiple services and centralize them for analysis

Getting Started: Basic Kafka Setup

Step-by-Step Installation (Basic)

1. Install Java (Kafka requires Java)
2. Download Kafka from Apache’s website
3. Start Zookeeper (Kafka’s coordination service)
4. Start Kafka server

Simple Python Example

from kafka import KafkaProducer, KafkaConsumer

# Producing a message
producer = KafkaProducer(bootstrap_servers=['localhost:9092'])
producer.send('user_actions', b'New user registered')

# Consuming messages
consumer = KafkaConsumer('user_actions')
for message in consumer:
    print(message.value)

Advantages of Kafka

🚀 Performance

• Can handle millions of messages/second
• Low latency (milliseconds)

🔒 Reliability

• Replicates data across multiple brokers
• Supports message replay and fault tolerance

Conclusion: The Future of Data Streaming

Kafka isn’t just a technology — it’s a paradigm shift in how we think about data movement. As applications become more distributed and real-time, Kafka provides the backbone for modern, scalable architectures.

Happy coding…………………:)

Node.js is an open-source runtime environment that allows developers to run JavaScript code outside a web browser. Built on the V8 JavaScript engine (used by Google Chrome), Node.js is known for its speed and efficiency. It is particularly well-suited for building scalable, real-time, and data-intensive applications.

If you’re looking to handle millions of connections seamlessly or create apps that thrive under heavy data loads, Node.js is your best bet.

Key Features of Node.js

1. Non-blocking I/O
   Node.js uses an event-driven, non-blocking I/O model, allowing operations like file reading, HTTP requests, or database queries to run asynchronously without blocking the main thread. This enables high concurrency.
2. Single-threaded Event Loop
   Node.js operates on a single thread using an event loop for handling multiple requests efficiently, without creating multiple threads.
3. Cross-platform
   Node.js runs on various platforms, including Windows, macOS, and Linux.
4. NPM (Node Package Manager)
   Node.js comes with NPM, the world’s largest package manager, offering reusable libraries and tools.
5. Scalability
   Node.js is ideal for handling many simultaneous connections, such as in chat applications or streaming services.
6. Fast and Efficient
   With the V8 engine, Node.js compiles JavaScript to machine code, resulting in fast execution.

What is process in Node.js?

The process object in Node.js is a global object that provides information about and control over the current Node.js process. It allows access to environment variables, event lifecycle, and command-line arguments.

// Access environment variables
console.log('Environment Variable SECRET:', process.env.SECRET || 'Not Defined');

// Command-line arguments
const args = process.argv.slice(2);
console.log('Command-line Arguments:', args);

// Listening to process events
process.on('exit', (code) => {
  console.log(`Process exited with code: ${code}`);
});

// Handle termination signal
process.on('SIGINT', () => {
  console.log('Process interrupted. Exiting...');
  process.exit();
});

What are Streams in Node.js?

Streams are a core concept in Node.js, used to handle reading and writing data piece by piece (in small chunks). They improve performance, especially for large files or datasets.

Types of Streams:

1. Readable Streams: For reading data.
2. Writable Streams: For writing data.
3. Duplex Streams: For reading and writing data.
4. Transform Streams: For modifying or transforming data during read/write operations

const fs = require('fs');

// Read from one file and write to another using piping
const readableStream = fs.createReadStream('input.txt');
const writableStream = fs.createWriteStream('output.txt');

readableStream.pipe(writableStream);

console.log('Data piped successfully.');

What is Buffer in Node.js?

A Buffer in Node.js is a temporary memory storage area for binary data. It is used to handle binary streams of data, such as files, video streams, or network packets.

const buffer = Buffer.from('Hello, Node.js!');
console.log(buffer); // Prints: <Buffer 48 65 6c 6c 6f 2c 20 4e 6f 64 65 2e 6a 73 21>
console.log(buffer.toString()); // Prints: Hello, Node.js!

What is Middleware?

Middleware refers to functions executed between receiving a request and sending a response. Middleware in Node.js (often used with frameworks like Express.js) can perform tasks like logging, authentication, or request parsing.

const express = require('express');
const app = express();

// Middleware to log request details
app.use((req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next(); // Pass control to the next middleware
});

app.get('/', (req, res) => {
  res.send('Hello, Middleware!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

What is Encoding and Why Use It?

Encoding converts data from one format to another, often for transmission or storage. For example, UTF-8 is a common text encoding format. In Node.js, encoding is commonly used when working with strings and files.

const fs = require('fs');

fs.writeFile('example.txt', 'Hello, Node.js!', 'utf8', (err) => {
  if (err) throw err;
  console.log('File written with UTF-8 encoding.');
});

What is the Event Loop?

The Event Loop is the mechanism that allows Node.js to perform non-blocking I/O operations by offloading tasks to the system kernel. It continuously checks for events, executes callbacks, and processes pending tasks.

What is Chaining in Node.js?

Chaining connects the output of one stream to another, forming a sequence of stream operations. It is commonly used with pipes for tasks like reading, transforming, and writing data.

const fs = require('fs');
const zlib = require('zlib');

// Compress a file using chaining
fs.createReadStream('input.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('input.txt.gz'));

console.log('File compressed successfully.');

When Not to Use Node.js?

Node.js is not ideal for:

• CPU-intensive tasks: Its single-threaded nature makes it unsuitable for heavy computation.
• Blocking operations: Tasks requiring synchronous/blocking behavior can degrade performance.

How to Debug Node.js Applications?

Node.js provides several debugging options:

1. Built-in Debugger

node --inspect server.js

1. Popular Tools:

• Visual Studio Code Debugger
• Node Inspector
• Debugging libraries (e.g., debug).

Code Example: Debugging with inspect

node --inspect-brk app.js

What is Piping in Node.js?

Piping is a mechanism for connecting the output of one stream to the input of another, allowing data to flow seamlessly.

const fs = require('fs');

// Copy content from one file to another
const readable = fs.createReadStream('source.txt');
const writable = fs.createWriteStream('destination.txt');

readable.pipe(writable);

console.log('File copied using piping.');

Code splitting in React optimizes loading times by splitting large bundles into smaller, demand-loaded chunks. This technique delays loading non-critical code until it’s needed, which improves the initial load time, interaction speed, and reduces abandonment rates.

Setup with Code Splitting

1. Create Project: npm create vite@latest with React and TypeScript.
2. Install Dependencies: npm install react-router-dom.
3. Create Pages: Create a src/pages folder with files (e.g., Profile.tsx, About.tsx) that export simple components.

Basic Routing without Code Splitting

Traditionally, React apps load all routes upfront:

<Route path='about' element={<About />} />

Applying Code Splitting

Use React.lazy to load routes on demand:

const About = lazy(() => import('./pages/About'));
<Suspense fallback={<div>Loading...</div>}>
  <Route path='about' element={<About />} />
</Suspense>

Route-Based Code Splitting

• Dynamic Route-Based Imports load only the resources needed for the current route, reducing the initial bundle size and deferring other page resources until navigation.
• Using React.lazy and Suspense in combination with react-router, we can dynamically load route-based components.

import React, { lazy, Suspense } from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));
const Contact = lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Private/Public Routes

Define PrivateRoutes and PublicRoutes components. Toggle them based on authentication status, allowing selective route rendering

const isAuthenticated = false;
<Route path="/*" element={isAuthenticated ? <PrivateRoutes /> : <PublicRoutes />} />

Benefit:

When navigating between routes, only the requested pages are loaded, minimizing the initial JavaScript payload.

2) Import On Interaction and Visibility

Component-level code splitting targets individual UI components, delaying their load until needed. This approach optimizes resource use by importing components only during interaction or when visible in the viewport.

1. Import on Interaction

This technique imports a component only when the user interacts with a specific element, like a button or a tab.

Example:

Suppose you have a Profile component that users rarely access and can be loaded on interaction:

import React, { lazy, Suspense, useState } from 'react';
const Profile = lazy(() => import('./Profile'));
export default function App() {
  const [showProfile, setShowProfile] = useState(false);
  return (
    <div>
      <button onClick={() => setShowProfile(true)}>Load Profile</button>
      {showProfile && (
        <Suspense fallback={<div>Loading...</div>}>
          <Profile />
        </Suspense>
      )}
    </div>
  );
}

Here, Profile loads only after the button is clicked, improving the initial load time by keeping it out of the initial bundle.

2. Import on Visibility

Use this technique for components only visible upon scrolling into view. react-intersection-observer is effective for visibility-based lazy loading.

Example:

For a Gallery component that appears only when scrolled into view:

import React, { lazy, Suspense } from 'react';
import { useInView } from 'react-intersection-observer';
const Gallery = lazy(() => import('./Gallery'));
export default function App() {
  const { ref, inView } = useInView({
    triggerOnce: true, // Load only once when visible
    threshold: 0.5, // Trigger when 50% visible
  });
  return (
    <div>
      <div style={{ height: '100vh' }}>Scroll down to load gallery...</div>
      <div ref={ref}>
        {inView && (
          <Suspense fallback={<div>Loading...</div>}>
            <Gallery />
          </Suspense>
        )}
      </div>
    </div>
  );
}

The Gallery component loads only when 50% of it is visible on the screen.

Benefits :

Reduced Initial Load Time: Defers loading for non-essential components.

Better User Experience: Improves interactivity, especially for components below the fold.

3) Compression techniques like gzip and broadly

• Gzip and Brotli are widely supported compression techniques that reduce JavaScript file sizes by 15–25%, improving load times.
• Next.js uses gzip compression by default, while in React, the compression algorithm must be specified in the Webpack configuration.
• Although Brotli provides better compression ratios than gzip, it might not be universally supported by all browsers.

// Sample Webpack configuration for gzip and Brotli in a React app
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress', // or 'gzip'
      test: /\.(js|css|html|svg)$/,
      compressionOptions: { level: 11 },
    }),
  ],
};

4) Prefetching in React

Prefetching is an optimization technique where we load resources before they’re required, improving load times for resources users are likely to access next. This technique is beneficial for anticipated user actions, like navigating to the next page.

React can use prefetching by leveraging <link rel="prefetch"> or <link rel="preload"> tags in the HTML or using libraries like react-router for component-based prefetching. Here’s how to do it:

1. Using rel="prefetch" and rel="preload" in HTML

• Add these links in your index.html file to prefetch or preload assets you expect users to need soon.

<link rel="prefetch" href="/path/to/next-page.js">
<link rel="preload" href="/path/to/important-script.js" as="script">

2. Component-Based Prefetching with React Router

• In applications with React Router, you can import pages in advance so they’re ready when a user navigates. The following example shows how to implement prefetching for specific routes:

import React, { lazy, Suspense } from "react";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

const Home = lazy(() => import("./Home"));
const About = lazy(() => import(/* webpackPrefetch: true */ "./About"));
const Contact = lazy(() => import(/* webpackPrefetch: true */ "./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Preloading in React

Preloading is an optimization technique where you load critical resources (such as JavaScript, CSS, or fonts) as soon as possible, even before they’re needed, to ensure that the resources are ready when required by the user. It helps improve page load times by prioritizing essential resources over less critical ones.

How to Implement Preloading in React

Preloading can be done by using the <link rel="preload"> tag in the HTML header or within React components, especially for assets like scripts, styles, and fonts.

<!-- Preload a critical JS file -->
<link rel="preload" href="/path/to/critical-script.js" as="script">

Preloading fonts:

<!-- Preload a custom font -->
<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Preloading Assets in Routes

When using React Router, you can preemptively load specific route components to ensure smoother navigation. This can be done in combination with React.lazy and Suspense for lazy loading.

const About = lazy(() => import(/* webpackPreload: true */ './About'));
const Contact = lazy(() => import(/* webpackPreload: true */ './Contact'));

Tree Shaking in JavaScript

Tree shaking is a term used to describe the process of eliminating dead code (unused code) during the build step of a JavaScript application. It helps reduce the final bundle size by ensuring that only the necessary code is included in the final output.

Steps to Enable Tree Shaking

1. ES Module Syntax

Tree shaking works best when your code uses ES Modules (import/export), as they allow the bundler to statically analyze the code and detect unused exports.

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add } from './utils';  // Only 'add' is imported, so 'subtract' will be removed during tree shaking.

2. Set Up Webpack for Tree Shaking

To enable tree shaking with Webpack, you need to ensure you’re using production mode and have configured your project to support ES Modules.

• In your webpack.config.js, make sure the mode is set to "production":

module.exports = {
  mode: 'production',
  // Other configurations...
};

Webpack uses dead code elimination (the core of tree shaking) when the project is in production mode.

• Ensure your dependencies also support tree shaking. For example, many libraries provide “modular” builds that only include the necessary parts, minimizing the final bundle size.

3. Use import and export Instead of require()

If you’re using CommonJS modules (e.g., require() and module.exports), tree shaking may not work as effectively. To take full advantage of tree shaking, you should switch to using ES Modules:

// Bad for tree shaking
const { add } = require('./utils');

// Good for tree shaking
import { add } from './utils';

4. Minification

Tree shaking works more effectively when combined with minification. Tools like Terser (used in Webpack by default in production mode) remove unused code during the final minification step. This step can further reduce the size of your JavaScript bundle.

Example of Tree Shaking in Action

Let’s say you have a utility file with multiple functions:

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

In your main application, you only use the add function:

// app.js
import { add } from './utils';

console.log(add(5, 3));

Conclusion

Optimizing JavaScript performance is key to faster, more efficient applications. Techniques like code splitting, compression (gzip/Brotli), prefetching, preloading, and tree shaking help reduce file sizes, improve load times, and enhance user experience. By implementing these strategies, you can create faster, more responsive apps with improved efficiency and better user satisfaction.

Difference Between React and ReactDOM

• React: Focuses on the core functionality of building UI components.
• ReactDOM: Specifically deals with rendering these components to the DOM in web applications.
• Separation of Concerns: Discuss how React handles the logic and structure, while ReactDOM handles the browser-related parts.

What is CDN? Why Do We Use It?

• Definition: CDN (Content Delivery Network) is a network of servers that deliver content to users based on their geographic location.
• Benefits: Explain benefits such as reduced latency, faster load times, and load distribution across servers.
• Use Case in React: Discuss how CDNs can be used to serve React libraries like react and react-dom efficiently.

What is Emmet ?

Definition: Emmet is a plugin for popular text editors like VS Code, Sublime Text, and Atom that enhances HTML and CSS workflows.

Usage: Emmet provides shorthand abbreviations to quickly generate complex HTML/CSS code, speeding up development.

Example:

• Abbreviation: ul>li*5

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

What is crossorigin in Script Tags?

• Purpose: The crossorigin attribute is used to handle CORS (Cross-Origin Resource Sharing) settings for script requests.
• Usage in React Projects: Explains when and why you might use the crossorigin attribute when loading scripts, such as from a CDN.

Difference Between dependencies and devDependencies

In JavaScript projects, especially those managed by Node.js and npm (Node Package Manager), dependencies are divided into two main categories: dependencies and devDependencies.

Dependencies (dependencies):

• Definition: These are packages that your project needs to run in production. They are essential for the application to function.
• Installation: When you install a package using npm install <package-name> --save, it gets added to the dependencies section of your package.json file.
• Examples: Frameworks and libraries like React, Axios, or Lodash that are used directly in your application code.

DevDependencies (devDependencies):

• Definition: These are packages that are only needed during the development phase of your project. They are not required in the production environment.
• Installation: Installing a package with npm install <package-name> --save-dev adds it to the devDependencies section.
• Examples: Tools like webpack, Babel, ESLint, and testing libraries like Jest or Mocha.

What is Tree Shaking?

Tree shaking is a term used in the context of JavaScript bundlers (like webpack) to describe the process of eliminating dead code.

• Definition: Tree shaking is a technique that removes unused code from the final bundle, reducing the overall size of the application and improving load times.
• How It Works: It leverages ES6 (ECMAScript 2015) module syntax, where import and export statements are static, meaning they are known at compile time. This allows bundlers to analyze and exclude code that is not used.
• Example: If you import a utility library but only use one function from it, tree shaking ensures that only that function is included in the final bundle, and the rest is removed

What is Hot Module Replacement (HMR)?

Hot Module Replacement is a feature provided by some module bundlers, such as webpack, that allows modules to be updated in place without requiring a full page reload.

What is Reconciliation in React?

Reconciliation is a process used by React to update the user interface (UI) efficiently when the state of an application changes. The core of React’s reconciliation process involves updating the virtual DOM (a lightweight in-memory representation of the actual DOM) and then efficiently updating the real DOM to reflect the changes.

Why Reconciliation Matters:

• Reconciliation allows React to update the UI in a performant and predictable manner. By only making the necessary updates to the DOM, React ensures that applications are responsive and maintain a smooth user experience.

What is Shimmer UI?

Shimmer UI is a design pattern used to indicate that content is loading or will be available shortly. It provides a visual placeholder that mimics the layout of the expected content, usually with a gradient or animated effect that simulates the appearance of data “shimmering” into view. This technique enhances the user experience

This is not the representation of Shimmer UI but I though to put some shimmer in your view

Difference Between JS Expression and JS Statement

JS Expression:

An expression in JavaScript is any valid unit of code that resolves to a value. Expressions can be simple or complex and include values, variables, operators, and function invocations.

• Examples of Expressions:
• 2 + 2 (resolves to 4)

JS Statement:

A statement in JavaScript is a piece of code that performs an action. Statements are the building blocks of a JavaScript program and define the actions the program takes.

• Examples of Statements:
• let x = 5; (declaration and assignment statement)

What is a Meta Tag?

A meta tag is an HTML tag that provides metadata about the HTML document. Metadata is data about data, and in this case, it provides information about the page’s content, character encoding, author, and more.

What is Server-Side Rendering (SSR) and Client-Side Rendering (CSR)

• Definition: SSR generates HTML on the server, while CSR generates it on the client.
• Benefits: Understanding the differences helps in choosing the right rendering method for performance and SEO.

Understanding these fundamental concepts not only sharpens your development skills but also equips you with the knowledge to tackle complex challenges with confidence. Whether you’re refining your existing knowledge or exploring new aspects, mastering these basics is key to becoming a more effective and insightful web developer.

Happy learning ……….

In the world of modern web development, React stands out as a powerful and versatile library for building user interfaces. Developed by Meta (formerly Facebook), React has gained immense popularity among developers and is widely used in various applications.

What is React?

React is a free and open-source front-end JavaScript library that simplifies the process of building dynamic and interactive user interfaces. It adopts a component-based architecture, allowing developers to create reusable UI components that can be composed together to build complex applications.

React in Action

React is widely used in the development of popular websites and web applications, including:

• Facebook
• Instagram
• Netflix
• Airbnb
• Twitter
• WhatsApp Web
• Pinterest
• Twitch

Exploring React Libraries

What is a Library?

In coding, a library refers to a collection of pre-written code that developers can leverage to simplify and expedite their programming tasks. These libraries provide reusable functionality that can be integrated into different applications, reducing development time and effort.

Essential Libraries for React Development

1. Axios

npm i axios

Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple-to-use library in a small package with a very extensible interface.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Instead of using Fetch we can use Axios and reduce the line of code by hitting API with the Axios library

2. Formik:

Formik is a free, open-source library that helps build and process form data in React applications. It provides a simple API and built-in validation, making it easy to collect and manipulate input data. Formik is used by companies like Airbnb, Walmart, Lyft, and Stripe.

npm i formik

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
};

const onSubmit = (values) => {
  console.log(values);
};

const validate = (values) => {
  const errors = {};

  if (!values.firstName) {
    errors.firstName = 'Required';
  }

  if (!values.lastName) {
    errors.lastName = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^\S+@\S+\.\S+$/.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  return errors;
};

const SampleForm = () => {
  return (
    <div>
      <h1>Sample Form</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validate={validate}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="firstName">First Name:</label>
              <Field type="text" id="firstName" name="firstName" />
              <ErrorMessage name="firstName" component="div" />
            </div>

            <div>
              <label htmlFor="lastName">Last Name:</label>
              <Field type="text" id="lastName" name="lastName" />
              <ErrorMessage name="lastName" component="div" />
            </div>

            <div>
              <label htmlFor="email">Email:</label>
              <Field type="email" id="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>

            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default SampleForm;

Formik simplifies form validation in React applications by providing an intuitive API for managing form state and validation logic.

3. React Helmet

React Helmet, for instance, can be used to dynamically set the document’s title, description, and meta tags. This comes in very handy when you need to update the meta tags for SEO. React Helmet supports all valid head tags, including title, style, base, meta, link, script, and NoScript.

npm i react-helmet

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

React Helmet can help you improve the SEO of your website by making it easier to set and update the meta tags that search engines use to index and rank your pages. By providing accurate and up-to-date information about your content, you can help search engines understand your website better and improve your ranking in search results.

React Helmet can also help you enhance the social media sharing of your website by making it easier to set and update the meta tags that social media platforms use to display your content when it is shared.

4. React -Redux:

Redux is a JS library for predictable and maintainable global state management.

npm i react-redux

Basic Example of React-Redux

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// Define the initial state
const initialState = {
  count: 0
};

// Define reducer function
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

// Create the Redux store
const store = createStore(reducer);

// Define action creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// Counter component
const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// Connect Counter component to Redux store
const ConnectedCounter = connect(
  state => ({ count: state.count }),
  { increment, decrement }
)(Counter);

// App component
const App = () => {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
};

export default App;

The whole global state of your app is stored in an object tree inside a single store. The only way to change the state tree is to create an action, an object describing what happened, and dispatch it to the store. To specify how a state gets updated in response to an action, you write pure reducer functions that calculate a new state based on the old state and the action.

5. React Router DOM

npm i react-router-dom

React Router Dom is commonly used for routing and managing navigation in web applications built using React. It simplifies the routing process by providing an API to define, navigate, and render routes.

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

The major advantage of react-router is that the page does not have to be refreshed when a link to another page is clicked…

6. Dotenv:

npm install dotenv --save

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from the codebase to secure the keys and information that should be kept confidential like passwords and secret key

import React, { useEffect, useState } from 'react';
require('dotenv').config();

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from the API using the environment variable
    fetch(process.env.REACT_APP_API_URL)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default App;

7. esLint

npm i eslint

ESLint is a popular open-source JavaScript linting utility. It analyzes your code for potential errors, enforces coding standards, and improves code quality. ESLint can also help you as a developer to identify and fix common mistakes, use best practices, and maintain consistency across your codebase.

Basic example

import js from "@eslint/js";

export default [
    js.configs.recommended,

   {
       rules: {
           "no-unused-vars": "warn",
           "no-undef": "warn"
       }
   }
];

import React from 'react';
import Header from './components/Header';const App = () => {
    return (
        <div>
            <Header />
        </div>
    );
};export default App;

As you can see, all we want to do is to render that one component. But if we run eslinton this file, we'll get a couple of errors.

1:8  warning  'React' is defined but never used   no-unused-vars
2:8  warning  'Header' is defined but never used  no-unused-vars

8. date-fns

npm i date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

// Parse a date string
const date = dateFns.parse('2023-08-04');

// Format a date
const formattedDate = dateFns.format(date, 'MM/dd/yyyy');

// Compare two dates
const areDatesEqual = dateFns.isEqual(date1, date2);

// Calculate the difference between two dates
const differenceInDays = dateFns.differenceInDays(date1, date2);

Date-fns is a powerful and versatile library for working with dates and times in JavaScript. It is a great choice for projects of all sizes.

9. react-error-boundaries

npm install react-error-boundary

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed

The component supports several ways to render a fallback (as shown below).

"use client";

import { ErrorBoundary } from "react-error-boundary";

function fallbackRender({ error, resetErrorBoundary }) {
  // Call resetErrorBoundary() to reset the error boundary and retry the render.

  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

<ErrorBoundary
  fallbackRender={fallbackRender}
  onReset={(details) => {
    // Reset the state of your app so the error doesn't happen again
  }}
>
  <ExampleApplication />
</ErrorBoundary>;

Wrap an ErrorBoundary component around other React components to "catch" errors and render a fallback UI (A fallback UI is a temporary UI that renders in place of the actual UI when it hasn’t finished loading).

10. sweetalert

npm install sweetalert --save

SweetAlert is a JavaScript library that provides alternative alert and modal dialog boxes for web applications. It can replace built-in alert functions and improve the user interface of default browser dialogs.

import React from 'react';
import Swal from 'sweetalert';

const SweetAlertExample = () => {
  const handleClick = () => {
    Swal.fire({
      title: 'Hello!',
      text: 'This is a SweetAlert dialog.',
      icon: 'success',
      confirmButtonText: 'OK'
    });
  };

  return (
    <div>
      <h1>SweetAlert Example</h1>
      <button onClick={handleClick}>Show SweetAlert</button>
    </div>
  );
};

export default SweetAlertExample;

11. styled-components

npm i styled-components

Styled-components is an open-source library that allows React and React Native developers to define UI components and styles in a single file location. It uses CSS in JavaScript (JS), which allows developers to write CSS code directly in the JavaScript file.

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function MyUI() {
  return (
    // Use them like any other React component – except they're styled!
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

12. react-tooltip

npm install react-tooltip

The react-tooltip package provides a <Tooltip/> component that can be bound to an anchor element and used to display element-specific information.

import React from 'react';
import ReactTooltip from 'react-tooltip';

const TooltipExample = () => {
  return (
    <div>
      <h1>React Tooltip Example</h1>
      <button data-tip="Hello, I am a tooltip!" data-for="tooltip">Hover me</button>
      <ReactTooltip id="tooltip" place="bottom" effect="solid" />
    </div>
  );
};

export default TooltipExample;

13. React Spinner

npm install --save react-spinners

react-spinner-loader provides a simple React SVG spinner component which can be implemented for async-await operation before data loads to the view.

import React from 'react';
import { css } from '@emotion/react';
import { RingLoader } from 'react-spinners';

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

const SpinnerExample = () => {
  return (
    <div className="sweet-loading">
      <RingLoader color={'#123abc'} css={override} size={150} loading={true} />
    </div>
  );
};

export default SpinnerExample;

14. Yup

npm i yup

Yup is a schema builder for runtime value parsing and validation. Define a schema, transform a value to match, assert the shape of an existing value, or both. Yup, schema are extremely expressive and allows modeling complex, interdependent validations, or value transformation.

import * as yup from 'yup';

const personSchema = yup.object({
  firstName: yup.string().defined(),
  nickName: yup.string().default('').nullable(),
  sex: yup
    .mixed()
    .oneOf(['male', 'female', 'other'] as const)
    .defined(),
  email: yup.string().nullable().email(),
  birthDate: yup.date().nullable().min(new Date(1900, 0, 1)),
});

15. @testing-library/jest-dom

npm install --save-dev @testing-library/jest-dom

@testing-library/jest-dom is a library that provides custom matchers to test the state of the DOM. It’s an extension for the Jest testing framework that enables assertions on DOM elements, attributes, and content.

<button data-testid="button" type="submit" disabled>submit</button>
<fieldset disabled><input type="text" data-testid="input" /></fieldset>
<a href="..." disabled>link</a>

expect(getByTestId('button')).toBeDisabled()
expect(getByTestId('input')).toBeDisabled()
expect(getByText('link')).not.toBeDisabled()

Conclusion

By leveraging these libraries, developers can enhance the functionality, performance, and user experience of their React applications while reducing development time and effort.

Overall, this comprehensive overview provides valuable insights into the ecosystem of tools and libraries available for React development, empowering developers to build robust and feature-rich applications effectively.

Writing code is only 40–60% of a Software Developer’s job.

Only coding doesn’t take you far in your career, here’s what else you need to learn to become a 1% developer.

-becoming a team player
-building relationships at work
-being solid at communication
-looking for new opportunities
-building problem solving mindset
-How to Google properly and learn
-in-depth software & system design
-take feedback positively to improve
-knowledge of code generation tools
-code analysis and proper debugging
-adding, unit, integration and end-to-end test cases

I can teach you to code.
Youtube can teach you to code.
Leetcode can teach you to code.

Yes, you need to be able to code.

But, being a good Software Engineer is much more than your coding ability.

Not everyone can solve problems, commit to being a team player, and look to better opportunities in the future.

Good work ethics and that proper mindset is much harder to teach.

Learn to code and do it well, but don’t underestimate other skills too, they matter and will make your career.