Forem: muthu raja

🚨 React Re-render Methods: Reference Matters!

muthu raja — Sun, 11 Jan 2026 04:10:43 +0000

In React, a component re-renders only when the state reference changes.
Some array methods DO NOT create a new reference, so React won’t re-render 🚫

❌ Methods that DO NOT change reference (Mutating methods)

These modify the same array/object in memory:

push
pop
shift
unshift
sort
reverse
splice
fill
copyWithin

⚠️ Using these directly on React state may NOT trigger a re-render

// ❌ Wrong
state.items.push(1);
setItems(state.items); // same reference

✅ Methods that CREATE a new reference (Safe for React)

These return a new array, so React detects the change:

map
filter
concat
slice
flat
flatMap
toSorted
toReversed
toSpliced

// ✅ Correct
setItems(prev => [...prev, 1]);

🧠 Key Rule to Remember

React compares references, not values.
Same reference = ❌ no render
New reference = ✅ re-render

🔥 One-line takeaway

“Mutating methods keep the same reference, so React won’t re-render. Always return a new reference when updating state.”

muthu raja

Oct 28 '24

Understanding Mutable vs. Immutable Data in React and Their Impact on Rendering

#webdev #react #beginners #tutorial

Comments 4

4 min read

ReactJS #JavaScript #Frontend #Immutability #WebDevelopment #ReactTips #SeniorDeveloper

Using Guard Clauses Instead of Try-Catch in Async/Await: A Clean Coding Technique for Readable and Maintainable Code 🦄🚀

muthu raja — Sat, 09 Nov 2024 01:35:43 +0000

Guard clauses are a programming technique used to improve code readability and maintainability by handling edge cases, errors, or early exits at the beginning of a function. When using guard clauses, you immediately "guard" against specific conditions, allowing the function to exit early if those conditions are met. This keeps the main logic path clean, reducing the need for deeply nested code and complex if-else structures.

Key Benefits of Guard Clauses

Improved Readability: Guard clauses make it easier to see what conditions might prevent the main logic from running. The primary, "happy path" code remains un-nested and easy to follow.
Reduced Nesting: By handling early exits up front, you avoid unnecessary nesting, which can make code harder to read and maintain.
Clear Separation of Concerns: Guard clauses focus on handling edge cases and exiting early, while the rest of the function is focused on the main logic.

Example of Guard Clauses in JavaScript
Without Guard Clauses (Nested if-else Blocks)

function processOrder(order) {
    if (order) {
        if (order.items && order.items.length > 0) {
            if (order.status === 'pending') {
                // Main logic for processing the order
                console.log('Processing order...');
            } else {
                console.log('Order is not in a pending state.');
            }
        } else {
            console.log('Order has no items.');
        }
    } else {
        console.log('Order does not exist.');
    }
}

With Guard Clauses (Cleaner Flow)
In this version, we use guard clauses to exit early, making the main logic path simpler:

function processOrder(order) {
    if (!order) {
        console.log('Order does not exist.');
        return; // Exit early
    }

    if (!order.items || order.items.length === 0) {
        console.log('Order has no items.');
        return; // Exit early
    }

    if (order.status !== 'pending') {
        console.log('Order is not in a pending state.');
        return; // Exit early
    }

    // Main logic for processing the order
    console.log('Processing order...');
}

How Guard Clauses Work in Practice
In the "With Guard Clauses" example:
Immediate Checks: The function immediately checks for cases

that would prevent it from running the main logic.
Early Exits: Each check exits early if a condition is met, so the rest of the function only runs if all conditions are clear.
Readable Happy Path: The primary code for processing the order is not wrapped in if blocks, so it’s clear and easy to read.

Using Guard Clauses in Asynchronous Code
Guard clauses are also effective in async/await functions to handle errors without using try-catch blocks, as demonstrated earlier. For instance:

export const to = (promise) => 
    promise
        .then((data) => [null, data])
        .catch((error) => [error, null]);

const fetchData = async () => {
    const [error, data] = await to(apiCall());
    if (error) {
        console.error('Failed to fetch data:', error);
        return; // Exit early if there's an error
    }

    console.log('Data fetched:', data);
    // Continue with processing the data
};

Understanding Mutable vs. Immutable Data in React and Their Impact on Rendering

muthu raja ・ Oct 28

#webdev #react #beginners #tutorial

🤔 Have You Used the Spread Operator Inside Loops? 🚀Performance and Memory Impact in JavaScript 📈🚀

muthu raja ・ Nov 1

#webdev #javascript #beginners #react

🤔 Have You Used the Spread Operator Inside Loops? 🚀Performance and Memory Impact in JavaScript 📈🚀

muthu raja — Fri, 01 Nov 2024 03:33:22 +0000

The spread operator (...) in JavaScript is a convenient syntax that expands elements of an iterable (like an array or object) into individual elements. Introduced in ES6, it allows for concise and flexible manipulation of data structures, and is commonly used in arrays and objects for tasks like combining, copying, or adding elements.

Using the spread operator within loops can significantly impact performance and memory usage, especially if you’re looping over a large collection. Here’s how this difference plays out:

1. Performance Impact in Loops 🏎️

Spread Operator: When used inside a loop, the spread operator creates a new object on each iteration. This process involves copying all properties of the original object each time, which can be slow, especially with large or deeply nested objects. Repeated copying in a loop can quickly add up in processing time.
Direct Value Changes: When you update an object directly, there’s no need to copy or recreate the object repeatedly. This is much faster since only the specific properties being modified are updated without creating new objects.

Example of Spread Operator in a Loop:

const array = [{ a: 1 }, { a: 2 }, { a: 3 }];
const updatedArray = array.map(obj => ({ ...obj, a: obj.a + 1 }));

Here, ({ ...obj, a: obj.a + 1 }) creates a new object on each iteration, causing multiple allocations and copying of properties.

Example of Direct Mutation in a Loop:

const array = [{ a: 1 }, { a: 2 }, { a: 3 }];
array.forEach(obj => {
  obj.a += 1; // Directly mutating without creating a new object
});

In this case, obj.a += 1 modifies the property directly, so no new object is created in each iteration, making this approach faster and more memory-efficient.

2. Memory Impact in Loops 💾

Spread Operator: Each iteration with the spread operator generates a new object in memory. If the loop has many iterations or the objects being copied are large, this can result in a lot of memory usage.
Direct Mutation: By modifying the object directly, you avoid creating multiple copies. The original object remains in memory, and only the modified values are updated, which saves memory.

Example of Performance Impact Comparison
For larger loops, using the spread operator repeatedly can make a noticeable difference. Here’s how both approaches differ in performance:

Spread Operator: When looping through thousands of items, each iteration involves copying the object, which can lead to memory spikes and slower execution.
Direct Mutation: With direct mutation, there’s no overhead of creating new objects. This approach is ideal if immutability is not required.

When to Use Each Approach

Use Spread Operator: If immutability is necessary (e.g., in frameworks like React where state should be immutable), the spread operator is appropriate, even if it’s slower. In these cases, try to minimize its use within loops by structuring the code to avoid deep nesting or frequent updates.
Use Direct Mutation: For performance-critical code, especially outside of UI libraries like React, direct mutation is more efficient in loops. This approach is recommended for backend processing or places where immutability isn’t required.

Optimizing Spread Operator Usage in Loops

Move Spread Operator Outside the Loop: If possible, try to minimize the spread operator’s usage within loops by refactoring code so that new objects are created only when needed.
Consider Libraries for Efficient Copying: In applications that need both performance and immutability (e.g., Redux), consider using libraries like immer which provide optimized methods for copying and modifying objects.

In summary, using the spread operator inside loops can significantly impact performance and memory usage by repeatedly creating new objects. Direct value changes avoid this overhead and are generally much faster.

Example code:
The following code snippet compares the performance of updating an object’s property using the spread operator versus direct mutation in a loop of 1,000,000 items.

console.time("render");
    const name = {name: "raja"}
const nameResult = Array(1000000).fill(name).map((nme) => {
    return {...nme, firstName: "Muthu"};
})
console.timeEnd("render"); // 2.175s
console.log("nameResult", nameResult[0]); // { name: 'raja', firstName: 'Muthu' }


console.time("render1");
    const name1 = {name: "raja"}
const name1Result = Array(1000000).fill(name1).map((nme) => {
    nme.firstName = "Muthu";
    return nme;
})
console.timeEnd("render1"); // 40.688ms
console.log("nameResult", name1Result[0]); { name: 'raja', firstName: 'Muthu' }

Breakdown:
Spread Operator Approach (render):
Creates a shallow copy of each name object using {...nme, firstName: "Muthu"}.
This results in a longer execution time (2.175s) due to repeated copying of objects in memory.

Direct Mutation Approach (render1):
Directly modifies the firstName property on each name object without creating a new object.
This approach is significantly faster (40.688ms), as it doesn’t involve copying, only modifying the existing object.

Key Takeaway:
Using the spread operator inside loops is slower due to the memory overhead of creating new objects each time, while direct mutation is much faster and more memory-efficient for large data processing tasks.

Understanding Mutable vs. Immutable Data in React and Their Impact on Rendering

muthu raja ・ Oct 28

#webdev #react #beginners #tutorial

Overview of HTTP Methods in APIs: GET, POST, DELETE, PUT, and PATCH

muthu raja — Wed, 30 Oct 2024 02:24:09 +0000

"APIs (Application Programming Interfaces) often use HTTP methods to allow communication between clients and servers, especially when working with web services. These methods define specific actions that can be performed on resources—such as retrieving, creating, updating, or deleting data—allowing for structured interactions in web applications. Let's go over some of the most common HTTP methods:"

1. GET: Retrieving Data
The GET method is used for retrieving data from a server without modifying it. It’s the most common method in REST APIs and is typically used to fetch data like user details, product information, or lists of items.

Use Cases:
- Getting a list of users or a single user’s data.
- Retrieving product details, like descriptions and prices.
- Accessing read-only resources like a homepage or blog posts.
Characteristics:
- Safe: Doesn’t alter the state of the server; it’s read- only.
- Idempotent: Repeated GET requests have the same result.
- Cacheable: Since it retrieves data without changes, results can be cached for efficiency.

Example:

GET /api/users/1

2. POST: Creating Resources
The POST method is used to create new resources on the server. When you submit a POST request, the server generates a new resource based on the provided data. Unlike GET, POST is a write operation and can change the server’s state.

Use Cases:
- Creating a new user account.
- Submitting a new product to a catalog.
- Sending data through a form, like submitting a support request.
Characteristics:
- Not Idempotent: Repeating a POST request multiple times can create multiple resources with identical data.
- Non-Cacheable: Generally not cached, as it’s a modifying request.
Example:

POST /api/users
Content-Type: application/json

{
    "name": "John Doe",
    "email": "john@example.com"
}

3. DELETE: Removing Resources
The DELETE method is used to delete a resource from the server. This method allows the client to instruct the server to remove a specific resource by its identifier (like an ID).

Use Cases:
- Deleting a user’s account.
- Removing a product from the inventory.
- Cancelling an order.
Characteristics:
- Idempotent: Even if a DELETE request is repeated, it will result in the same final state—either the resource is deleted, or it’s already gone.
- Non-Cacheable: Generally not cached, as it modifies data on the server.
Example:

DELETE /api/users/1

4. PUT: Updating or Replacing Resources
The PUT method is used to update an existing resource or create a resource if it doesn’t exist. When using PUT, the client sends the complete representation of the resource it wants to update. PUT is typically used for updates where all properties of a resource are known and provided.

Use Cases:
- Replacing a user’s profile information.
- Overwriting the details of a product.
- Updating a blog post with new content.
Characteristics:
Idempotent: Repeated PUT requests with the same data have

the same effect, producing the same resource state.
Non-Cacheable: It’s generally not cached as it modifies

data.
Example:

PUT /api/users/1
Content-Type: application/json

{
    "name": "Jane Doe",
    "email": "jane@example.com"
}

This request updates the user with ID 1 with the new name “Jane Doe” and email “jane@example.com”. If the user doesn’t exist, the server may create a new one, depending on implementation.

5. PATCH: Partially Updating Resources
The PATCH method is similar to PUT but is used for partial updates. Instead of sending a complete representation of the resource, PATCH allows clients to update only specific fields. It’s useful when only a few attributes of a resource need changing without replacing the whole resource.

Use Cases:
- Updating just a user’s email address without modifying other details.
- Changing only the stock quantity of a product.
- Modifying a blog post’s title while leaving the content unchanged.
Characteristics:
- Idempotent: Like PUT, repeating a PATCH request with the same data has the same effect.
- Non-Cacheable: Not typically cached as it’s a modifying operation.
Example:

PATCH /api/users/1
Content-Type: application/json

{
    "email": "new-email@example.com"
}

This request updates only the email address for the user with ID 1, leaving all other fields as they are.

GET: Read data (safe, idempotent, cacheable).
POST: Create new resources (not idempotent, non-cacheable).
DELETE: Remove resources (idempotent, non-cacheable).
PUT: Update or replace resources fully (idempotent, non-cacheable).
PATCH: Partially update resources (idempotent, non-cacheable).

Each method serves a specific purpose and enables REST APIs to provide a full suite of interactions, allowing clients to create, read, update, and delete resources efficiently. Understanding these methods helps in designing consistent, intuitive APIs and allows clients to interact effectively with server resources.

The 6 Stages of the Node.js Event Loop

muthu raja — Tue, 29 Oct 2024 03:48:58 +0000

The event loop is a crucial mechanism in Node.js that manages asynchronous callbacks, enabling the platform to perform non-blocking I/O operations. Here’s a detailed breakdown of 6 key points of the event loop operates.

Call Stack
Callback Registration
Callback Queues
Continuous Monitoring
Completion of Asynchronous Operations
Execution Flow

1. Call Stack: Understanding the Call Stack in JavaScript:

The call stack is where JavaScript code is executed. When a function is called, it is pushed onto the call stack. Once the function execution is complete, it is popped off the stack.
If the call stack is busy executing functions, the event loop waits until the stack is empty before checking the callback queues.

2. Callback Registration: How Asynchronous Operations Are Handled:

Web APIs and Node.js APIs: When an asynchronous operation (like a file read, network request, or timer) is initiated, the corresponding callback is registered with a Web API (in the browser) or a Node.js API (in the server).
Example:
- For setTimeout(), when the timer expires, the callback function is registered with the event loop to be executed in the macrotask queue.
- For a network request made via http.get(), when the data is received, the callback is placed in the queue for processing.

3. Callback Queues: Macrotask vs. Microtask:
Node.js maintains two primary types of callback queues

Macrotask Queue (Task Queue): This queue handles callbacks from operations such as setTimeout, setInterval, I/O operations, and other tasks that take time. Tasks in this queue are executed only after all microtasks have been processed and the call stack is empty.
Microtask Queue: This queue includes callbacks from Promises and process.nextTick(). Microtasks have a higher priority and are executed immediately after the call stack is empty, before processing any macrotasks.

4. Continuous Monitoring by the Event Loop:

The event loop continuously checks the call stack and the callback queues to determine if there are any tasks that need to be executed. This allows Node.js to handle multiple asynchronous operations concurrently without blocking the main thread.

5. Completion of Asynchronous Operations:
Once an asynchronous operation completes, the corresponding callback function is added to the appropriate queue:

If a timer set by setTimeout() expires, the associated callback is registered in the macrotask queue, waiting to be executed after the current stack and any microtasks are processed.

6. Execution Flow: Moving Tasks Back to the Call Stack:

When the call stack is empty, the event loop first processes all the tasks in the microtask queue. This ensures that promise resolutions and other microtasks are handled as soon as possible.
After all microtasks are completed, the event loop will move on to the macrotask queue and execute one task at a time. This task execution continues until the stack is empty again, at which point the loop checks the queues once more.
Once the task is executed, it is removed from the call stack

Examples of Event Loop Execution:

console.log('Start');

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

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

console.log('End');

Output:

Start
End
Promise
Timeout

In this example:

The synchronous logs ('Start' and 'End') execute first, adding them to the call stack.
The setTimeout callback is registered in the macrotask queue.
The Promise resolves, adding its callback to the microtask queue.
After the call stack is cleared, the event loop processes the microtask queue ('Promise') before moving on to the macrotask queue ('Timeout').

The event loop is a core feature of Node.js that enables efficient management of asynchronous operations. By continuously monitoring the call stack and callback queues, it ensures that tasks are processed in a non-blocking manner. The registration of callbacks in Web APIs and Node.js APIs is key to maintaining responsiveness in applications, allowing Node.js to handle numerous concurrent operations efficiently.

Understanding Mutable vs. Immutable Data in React and Their Impact on Rendering

muthu raja — Mon, 28 Oct 2024 05:10:56 +0000

When building applications in React, understanding the concepts of mutable and immutable data is essential. These concepts influence how React components respond to data changes, helping us ensure efficient rendering and a smooth user experience. In this article, we’ll explore what mutable and immutable data mean, how they affect React’s rendering process, and why using immutable data updates is usually the best approach in React.

What is Mutable Data?
Mutable Data in React
What is Immutable Data?
Immutable Data in React
Why Favor Immutable Updates in React?
Common Immutable Update Patterns

What is Mutable Data?
Mutable data refers to data structures that can be directly modified after they are created. For example, arrays and objects in JavaScript are mutable by nature, meaning their contents can be changed without changing the reference (or the identity) of the data structure.

Consider this example of mutating an array:

let myArray = [1, 2, 3];
myArray.push(4); // Modifies the original array
console.log(myArray); // Output: [1, 2, 3, 4]

In this example, we used push to add an element to myArray, which modifies it directly without creating a new array.

Mutable Data in React
In React, the way we handle data is crucial because React relies on something called reconciliation to determine when and what parts of the UI need to update. This reconciliation process uses a shallow comparison (checking references) to detect changes. If you directly modify an object or array (i.e., use mutable data), React may not detect the change because the reference hasn’t changed, even though the content has.

This can cause unexpected behavior where updates may not appear in the UI as intended.

Example: Mutable Update in React
Imagine a scenario where we try to update a state array by directly modifying it:

const [items, setItems] = useState([1, 2, 3]);

const addItemMutably = () => {
  items.push(4);       // Modifying the array directly
  setItems(items);      // Setting the same reference
};

In this case:

We’re directly modifying the items array with push, which alters the array in-place without creating a new reference.
When we call setItems(items), React might not re-render the component because the reference to items hasn’t changed, even though we added a new item.
This is problematic because we expect the UI to update when we add an item, but it may not due to the lack of a new reference.

What is Immutable Data?
Immutable data refers to data that cannot be modified after it’s created. Instead, if we need to make changes, we create a new version of the data structure that incorporates the changes, leaving the original data unchanged. This concept is key to functional programming and is highly compatible with React’s rendering process.

For example, instead of using push, which mutates an array, we can use concat, which returns a new array with the added element.

let myArray = [1, 2, 3];
let newArray = myArray.concat(4); // Creates a new array
console.log(newArray); // Output: [1, 2, 3, 4]
console.log(myArray);  // Output: [1, 2, 3] (original remains unchanged)\

Immutable Data in React
Using immutable data in React allows us to take advantage of React’s shallow comparison during the reconciliation process. When we update the state immutably, a new reference is created, signaling React that a change has occurred and triggering a re-render.

Example: Immutable Update in React
Using the same scenario, here’s how we can add an item to an array immutably:

const [items, setItems] = useState([1, 2, 3]);

const addItemImmutably = () => {
  const newItems = [...items, 4];  // Creating a new array
  setItems(newItems);              // Setting the new reference
};

In this example:

We use the spread operator [...] to create a new array containing the previous items plus the new item.
When we call setItems(newItems), React sees the new reference (newItems) and knows that it’s different from the previous reference (items), so it re-renders the component to reflect the change.

Why Favor Immutable Updates in React?
Here are some key reasons why using immutable data updates in React is beneficial:

Predictable Rendering: By creating a new reference each time data is modified, you ensure that React will detect the change and re-render the component as needed. This leads to more predictable and consistent UI behavior.
Easier Debugging: When data is immutable, it’s easier to track and debug changes, as the original data remains intact. This is particularly useful for debugging complex applications.
Optimized Performance: React’s reconciliation process benefits from immutable updates because it can quickly determine whether a re-render is necessary. Mutable updates can lead to unnecessary or missed re-renders, which can degrade performance.
Functional Programming Compatibility: React’s component-based design works well with functional programming principles, and immutability is a core aspect of functional programming. Immutable updates reduce side effects, making components easier to test and maintain.

Common Immutable Update Patterns
To work with immutable data in React, here are some common patterns:

Using the Spread Operator: For arrays and objects, the spread operator is a simple way to create new references with modifications.

 // Adding to an array immutably
 const newArray = [...array, newValue];

 // Updating an object immutably
 const newObject = { ...object, key: newValue };

Using Array Methods That Don’t Mutate: Use methods like concat, map, filter, and reduce, which return new arrays rather than modifying the original one.

 const newArray = array.concat(newValue); // Adds newValue without mutating

Using Utility Libraries: For more complex data handling, libraries like Immer or Immutable.js offer tools for managing immutable data structures easily.

Conclusion
Understanding the difference between mutable and immutable data and how they impact React’s rendering is crucial for building efficient and reliable applications. Mutable data can lead to issues with React’s rendering process, causing missed updates and unpredictable behavior. By using immutable data updates, you ensure that React can detect changes properly, leading to smoother, more predictable UI updates. Embracing immutability in your React applications helps you maintain consistent state management and improves the overall performance of your components.

Using immutable updates is not just a best practice in React but also aligns well with functional programming principles, making your code cleaner, easier to debug, and more maintainable in the long run

🤔 Have You Used the Spread Operator Inside Loops? 🚀Performance and Memory Impact in JavaScript 📈🚀

muthu raja ・ Nov 1 '24

#webdev #javascript #beginners #react

🚨 React Re-render Methods: Reference Matters!

muthu raja ・ Jan 11

#react #beginners #webdev #programming

Understanding useCallback in Reactjs

muthu raja — Sat, 26 Oct 2024 02:38:52 +0000

The useCallback hook memoizes the function itself, not its return value. useCallback caches the function reference

A function declared inside a component gets re-created on every render, similar to a variable. The difference is, it gets rendered with a different reference every time. So,

A useEffect dependent on this function will execute again on each render.
A similar thing happens with child components.

A useEffect dependent on this function will execute again on each render:

import React, { useState, useEffect, useCallback } from 'react';

// Parent Component
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  // Function declared inside the component
  const handleClick = () => {
    setCount(count + 1);
  };

  // useEffect depending on handleClick
  useEffect(() => {
    console.log("handleClick changed, running useEffect");
  }, [handleClick]);

  return (
    <div>
      <button onClick={handleClick}>Increment Count</button>
      <p>Count: {count}</p>
      <ChildComponent handleClick={handleClick} />
    </div>
  );
};

// Child Component
const ChildComponent = React.memo(({ handleClick }) => {
  console.log("ChildComponent re-rendered");
  return <button onClick={handleClick}>Child Increment</button>;
});

export default ParentComponent;

A similar thing happens with child components:

When we have a component with expensive or "slow" rendering logic as a child of another component, every time the parent component renders, all of its children also re-render.

To prevent these unnecessary re-renders, we can use React.memo. This higher-order component caches the child component, ensuring that it only re-renders if its props actually change. However, there’s a subtle catch when passing functions as props, which causes the child to re-render even when it shouldn’t.

The Problem with Function References

Imagine we have a SlowComponent as a child of App. In App, we have a state that changes on button click, triggering a re-render of App. Although we’re not changing SlowComponent's props, it still re-renders on every click.

Why? On each render, the handleClick function is re-created with a new reference, which React interprets as a changed prop, causing SlowComponent to re-render. To fix this, we use the useCallback hook to cache the function's reference across renders.

Solution with useCallback

By wrapping handleClick inside useCallback, we tell React to only re-create it when specific dependencies change. Here’s the syntax:

const cachedFn = useCallback(fn, [dependencies]);

fn: This is the function definition you want to cache. It can accept arguments and return any value.
dependencies: This is an array of dependencies. React will re-create fn if any dependency changes. On the first render, React creates and caches the function. On subsequent renders, as long as the dependencies haven’t changed, the cached function is returned, ensuring it has a stable reference.

Applying useCallback in Our Example
Let’s take a look at how we’d use useCallback to optimize our App component:

import React, { useState, useCallback } from "react";

const App = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState("");

  // Wrapping handleClick with useCallback to cache its reference
  const handleClick = useCallback(() => {
    setValue("Kunal");
  }, [setValue]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
      <SlowComponent handleClick={handleClick} />
    </div>
  );
};

const SlowComponent = React.memo(({ handleClick }) => {

// Intentially making the component slow
  for (let i = 0; i < 1000000000; i++) {}
  console.log("SlowComponent re-rendered");
  return <button onClick={handleClick}>Click me in SlowComponent</button>;
});

export default App;

When to use useCallback

When you have event handlers defined for an element inside your component, wrap them inside a useCallback to avoid unnecessary re-creations of event handlers.
When you call a function inside a useEffect, you usually pass the function as a dependency. To avoid using useEffect unnecessarily on every render, wrap the function definition inside a useCallback.
If you are writing a custom hook, and it returns a function, it is recommended to wrap it inside a useCallback. So, there's no need for the users to worry about optimizing the hook – rather, they can focus on their own code.

Understanding When, Why the task offloaded to Thread pool in nodejs

muthu raja — Fri, 25 Oct 2024 03:40:48 +0000

In Node.js, it’s primarily the heavy I/O tasks that are offloaded to the thread pool. Here’s a breakdown to clarify the concepts:

1. Synchronous Blocking I/O:

Definition: Synchronous blocking I/O operations are those that stop the execution of the program until the operation is complete. For example, using fs.readFileSync() will block the event loop until the file is read.
Behavior: These operations are not offloaded to the thread pool. They are executed directly in the main thread and block the event loop, making them less efficient for handling concurrent requests.

2. Heavy I/O Tasks:

Definition: These include operations that can take a considerable amount of time, such as reading large files, performing complex cryptographic computations, or waiting for external resources.
Behavior: Heavy I/O tasks are typically offloaded to the thread pool to prevent them from blocking the event loop. This allows the application to remain responsive and continue handling other asynchronous tasks while the heavy I/O operation is being processed in the background.

Summary:

Synchronous blocking I/O operations (like fs.readFileSync()) are executed in the main thread and block the event loop; they are not offloaded to the thread pool.
Heavy I/O tasks, on the other hand, are offloaded to the thread pool to avoid blocking the main event loop, allowing for better scalability and performance in Node.js applications.

In practice, it’s best to use asynchronous (non-blocking) I/O methods (like fs.readFile()) for I/O operations in Node.js to take full advantage of its non-blocking architecture.

Exploring JavaScript Runtime Environments: From Web Browsers to IoT

muthu raja — Thu, 24 Oct 2024 06:40:19 +0000

A JavaScript runtime environment is a platform where JavaScript code is executed, web browsers are JavaScript runtime environments, JavaScript was originally designed to run in web browsers (like Chrome, Firefox, etc.) then it extended outside of a web browser. JS runtime environments enable it to run on servers, desktop applications, and more.

Here’s a comprehensive list of different contexts where JavaScript can be executed:

Web Browsers
Server-Side Environments
Desktop Applications
Mobile Applications
Embedded Systems
Game Development
Command-Line Interfaces (CLI)
Testing Environments
Cloud Functions and Serverless Computing
IoT and Smart Devices
Browser Extensions

1. Web Browsers

Client-Side Execution: Browsers like Chrome, Firefox, Safari, and Edge have built-in JavaScript engines (like V8 for Chrome and SpiderMonkey for Firefox) that allow JavaScript to run on the client-side, enabling dynamic content, interactive elements, and single-page applications (SPAs).

2. Server-Side Environments

Node.js: A popular runtime for server-side applications that allows developers to build scalable web servers and APIs using JavaScript.
Deno: A secure runtime for JavaScript and TypeScript, emphasizing modern features and a simplified module system.

3. Desktop Applications

Electron: Framework for building cross-platform desktop apps using web technologies.
NW.js: Another framework for creating desktop applications that leverage web technologies.

4. Mobile Applications

React Native: A framework that allows developers to build mobile applications using JavaScript and React. It compiles to native components, enabling high performance.
NativeScript: A framework for building mobile applications with JavaScript, Angular, or Vue.js, allowing access to native APIs.

5. Embedded Systems

Espruino: A JavaScript interpreter specifically designed for embedded devices, allowing developers to program microcontrollers using JavaScript.
Johnny-Five: A robotics and IoT platform that uses JavaScript to control hardware like Arduino boards.

6. Game Development

Unity (with JavaScript): While Unity primarily uses C#, it has a scripting environment that supports JavaScript (UnityScript) for game development.
Phaser: A framework for creating HTML5 games, allowing developers to build games using JavaScript and WebGL.

Command-Line Interfaces (CLI)
Node.js CLI Applications: Developers can create command-line tools using Node.js, leveraging its file system and other built-in modules.
NPM Scripts: JavaScript is used in package.json scripts to automate tasks in development workflows.

8. Testing Environments

Jest: A testing framework that runs JavaScript code for unit and integration testing.
Mocha: A feature-rich JavaScript test framework for Node.js and browsers.

9. Cloud Functions and Serverless Computing

AWS Lambda: Allows developers to run JavaScript (Node.js) functions in a serverless environment.
Google Cloud Functions: Another serverless platform supporting Node.js for building event-driven applications.

10. IoT and Smart Devices

Node-RED: A flow-based programming tool for wiring together hardware devices, APIs, and online services using JavaScript.
Cylon.js: A JavaScript framework for robotics and IoT that allows developers to control hardware devices.

11. Browser Extensions

Many browser extensions are built using JavaScript and web technologies, allowing developers to extend browser functionality.

Common built-in APIs in Nodejs

muthu raja — Wed, 23 Oct 2024 02:43:03 +0000

Node.js offers a wide variety of built-in APIs, which are essential for server-side operations, file handling, networking, and other tasks. Below is a comprehensive list of the key Node.js built-in APIs:

Global Objects
File System (fs) API
HTTP/HTTPS API
Path API
OS API
Events API
Streams API
Buffer API
Timers API
Crypto API
Child Processes API
Process API
URL API

1. Global Objects

global
process
console
setTimeout()
clearTimeout()
setInterval()
clearInterval()
setImmediate()
clearImmediate()
queueMicrotask()

2. File System (fs) API
The fs module in Node.js allows you to interact with the file system for reading, writing, and managing files and directories.

Example: Reading a file asynchronously

const fs = require('fs');

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('Error reading the file:', err);
    return;
  }
  console.log(data);
});

3. HTTP/HTTPS API
Node.js provides the http and https modules to create web servers, handle HTTP requests, and make HTTP calls.

Example: Creating a simple HTTP server

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000/');
});

4. Path API
The path module provides utilities for working with file and directory paths.

Example: Joining and resolving file paths

const path = require('path');

const fullPath = path.join(__dirname, 'folder', 'file.txt');
console.log(fullPath); // Outputs the full path to file.txt

5. OS API
The os module provides operating system-related utility functions, allowing you to get information about the system.

Example: Getting information about the system

const os = require('os');

console.log('Platform:', os.platform());
console.log('Architecture:', os.arch());
console.log('Total memory:', os.totalmem());
console.log('Free memory:', os.freemem());

6. Events API
The events module provides an EventEmitter class that allows you to create, listen for, and emit custom events.

Example: Creating and emitting events

const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('event', () => {
  console.log('An event occurred!');
});

emitter.emit('event'); // Triggers the event listener

7. Streams API
Streams are used in Node.js to handle reading and writing of data in chunks, useful for handling large files or data streams like HTTP requests and responses. The stream module is built into Node.js.

Example: Reading a file as a stream

const fs = require('fs');

const readStream = fs.createReadStream('example.txt');
readStream.on('data', (chunk) => {
  console.log('Received chunk:', chunk);
});

8. Buffer API
The Buffer class in Node.js is used to handle binary data. It's especially useful for working with streams or data that is not in string format (e.g., raw files or network packets).

Example: Creating a buffer and writing to it

const buffer = Buffer.from('Hello World');
console.log(buffer); // Outputs the buffer containing binary data

9. Timers API
Node.js provides timers similar to the browser’s setTimeout and setInterval functions. These are part of the Node.js runtime and are used to execute code after a delay or at regular intervals.

Example: Using setTimeout to delay a function call

setTimeout(() => {
  console.log('Executed after 1 second');
}, 1000);

10. Crypto API
The crypto module provides cryptographic functions for hashing, encryption, and decryption.

Example: Generating a SHA-256 hash

const crypto = require('crypto');

const hash = crypto.createHash('sha256').update('password').digest('hex');
console.log(hash); // Outputs the SHA-256 hash of 'password'

11. Child Processes API
The child_process module allows you to spawn new processes from your Node.js application. This is useful for executing system commands or running external programs.

Example: Spawning a new process to run a system command

const { exec } = require('child_process');

exec('ls', (err, stdout, stderr) => {
  if (err) {
    console.error('Error:', err);
    return;
  }
  console.log('Output:', stdout);
});

12. Process API
The process object is a global object that provides information about the current Node.js process and allows interaction with it.

Example: Accessing command-line arguments

console.log('Command-line arguments:', process.argv);

13. URL API
The url module provides utilities for URL resolution and parsing.
Example: Parsing a URL

const url = require('url');

const myUrl = new URL('https://www.example.com:8080/path?name=foo#bar');
console.log(myUrl.hostname); // 'www.example.com'
console.log(myUrl.pathname); // '/path'
console.log(myUrl.searchParams.get('name')); // 'foo'

React js Life cycle

muthu raja — Tue, 22 Oct 2024 02:34:56 +0000

Mount
Update
unmount

Function component

Mount:
useEffect(() => {...}, []): The useEffect hook with an empty dependency array runs only once after the initial render, similar to componentDidMount.

Update:
useEffect(() => {...}, [dependencies]): When you pass dependencies to useEffect, it will run whenever one of the dependencies (state or props) changes, similar to componentDidUpdate.
useState(): This hook updates the state, triggering a re-render.
useMemo() and useCallback(): These hooks help in optimizing performance during updates by memoizing values and functions.

Unmount:
useEffect(() => {... return () => {...}}): You can return a cleanup function from useEffect to run when the component unmounts, similar to componentWillUnmount.

Class component

Mount:
constructor()
Initializes the component, sets up state, and binds methods.

getDrivedStateFromProps()
Syncs state with props before rendering. Not often used.

render()
Describes what to render (UI) and returns JSX.

componentDidMount()
Called after the component is mounted (useful for fetching data, setting
up subscriptions).

Update:
getDrivedStateFromProps()
Syncs state with props before rendering (also called during updates).

shouldComponentUpdate()
Decides if a re-render is needed (used for performance optimizations)

render()
Re-renders the component when state or props change.

getSnapshotBeforeUpdate()
Captures information (like scroll position) before the DOM changes

componentDidUpdate()
Called after the component has re-rendered (useful for interacting with
DOM or network requests).

Unmount:
componentWillUnmount()
Called before the component is removed from the DOM (used for cleanup,
such as removing subscriptions)

Error Handling
componentDidCatch()
Catches errors in child components and allows error handling (React
16+).

Key characteristic of Component-Based Architecture

muthu raja — Mon, 21 Oct 2024 05:10:27 +0000

Here are 6 key characteristics of Component-Based Architecture implemented in React JS. These examples will demonstrate how React components embody the characteristics of

Reusability
Encapsulation,
Interchangeability
Scalability
Maintainability
Composition

Reusability
Components can be reused across different parts of the application.
Example: A Button component used multiple times

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Submit" onClick={() => alert('Submit clicked')} />
      <Button label="Cancel" onClick={() => alert('Cancel clicked')} />
    </div>
  );
}

Encapsulation
Components encapsulate their logic and styles, preventing outside interference.
Example: UserProfile component encapsulating user data

function UserProfile({ name, email }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
    </div>
  );
}

function App() {
  return (
    <UserProfile name="John Doe" email="john@example.com" />
  );
}

Interchangeability
Components can be swapped or replaced without affecting the app's overall functionality.
Example: Swapping a PrimaryButton with SecondaryButton

function PrimaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>{label}</button>;
}

function SecondaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'gray', color: 'white' }} onClick={onClick}>{label}</button>;
}

function App({ usePrimary }) {
  return (
    <div>
      {usePrimary ? <PrimaryButton label="Click Me" onClick={() => alert('Primary clicked')} /> : 
                   <SecondaryButton label="Click Me" onClick={() => alert('Secondary clicked')} />}
    </div>
  );
}

Scalability
Components make it easy to scale by adding more features without affecting existing components.
Example: Adding more Product components to scale the app

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function ProductList() {
  const products = [
    { name: 'iPhone 13', price: 999 },
    { name: 'Samsung Galaxy S21', price: 799 },
    { name: 'Google Pixel 6', price: 599 },
  ];

  return (
    <div>
      {products.map((product, index) => (
        <Product key={index} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

function App() {
  return <ProductList />;
}

Maintainability
Components are isolated, so they can be easily maintained and updated independently.
Example: Updating the Product component without affecting the rest of the app

function Product({ name, price }) {
  // Add a new feature to show if the product is on sale
  const isOnSale = price < 700;
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price} {isOnSale && <span>(On Sale!)</span>}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Product name="Google Pixel 6" price={599} />
    </div>
  );
}

Composition
Components can be combined or composed to build more complex UIs.
Example: Composing Header, Product, and Footer into a single Page

function Header() {
  return <h1>Welcome to My Shop</h1>;
}

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function Footer() {
  return <footer>Contact us at shop@example.com</footer>;
}

function Page() {
  return (
    <div>
      <Header />
      <Product name="Apple Watch" price={399} />
      <Footer />
    </div>
  );
}

function App() {
  return <Page />;
}