DEV Community: Akshat Soni

Understanding Array Mutation in Redux: A Common Pitfall with useSelector

Akshat Soni — Mon, 09 Sep 2024 17:19:06 +0000

What is the Problem?

When working with Redux, we often deal with immutable data structures to maintain the predictability of the application state. However, recently I encounter issue is unintentionally mutating the state, especially when handling arrays.

let's try, A common scenario is trying to reorder an array from the Redux store and inadvertently modifying the original array.

In this blog, we’ll explore this issue and how useSelector in Redux gives us a reference to the original state, which can lead to unexpected side effects.

Why Does This Happen?

The root cause of this problem stems from how JavaScript handles arrays and objects. When we use useSelector in Redux, it doesn’t return a new copy of the state. It returns a reference to the current state. If we modify this array using JavaScript methods like sort(), splice(), or reverse(), these methods mutate the original array in place, affecting the state inside your Redux store.

Here's an example of what happens:

// Selector to get an array from the Redux store
const myArray = useSelector((state) => state.myArray);

// Attempting to reorder the array
myArray.sort((a, b) => a.id - b.id);  // This mutates the original array

In this case, the sort() function modifies myArray directly, meaning it alters both the local variable and the array in the Redux store because myArray is just a reference to the store’s state.

What is the Best Process?

To avoid mutating the original array in Redux, we need to create a new copy of the array before making any changes. This ensures that the Redux store remains immutable, which is crucial for features like time travel debugging, state predictability, and preventing unwanted side effects.

Here’s how we can handle it correctly:

Create a Shallow Copy of the Array

Use methods like slice(), [...spread operator], or Array.from() to create a shallow copy of the array before modifying it.
Work on the New Copy

Modify the copied array without affecting the original.

Example of the Correct Approach:

// Selector to get an array from the Redux store
const myArray = useSelector((state) => state.myArray);

// Create a copy of the array before modifying
const newArray = [...myArray];  // Or use myArray.slice() / Array.from(myArray)

// Modify the new array
newArray.sort((a, b) => a.id - b.id);

// Use newArray without affecting the original Redux state

By using the spread operator or other cloning methods, we're ensuring that we work with a new instance of the array rather than mutating the one inside the Redux store.

Best Practices for Handling Redux State

To summarize, here are some best practices to avoid mutating the Redux state:

Never directly modify state obtained via useSelector. Always create a new copy before applying any changes.
Prefer pure functions like map(), filter(), and reduce() to modify arrays instead of mutating methods like sort() or splice().

Conclusion

Understanding how JavaScript works with references and Redux’s immutability principles is crucial to managing our state effectively. Always ensure that we create new instances of arrays or objects before modifying them to avoid unintentional state mutations. By following these best practices, we can write more predictable and bug-free Redux applications.

if you have any suggestions or questions let me know in comment.

Understanding the Key Differences Between | and || in TypeScript

Akshat Soni — Sun, 25 Aug 2024 07:36:05 +0000

This blog post will show the difference between these two operators.

In TypeScript, operators are essential tools that allow us to manipulate data and control the flow of applications. Among the various operators, the pipe symbol (|) and the double pipe symbol (||) are often used, but they serve very different purposes.

Understanding the difference between these two operators is crucial for writing efficient and error-free code.

What is this?

The single pipe (|) in TypeScript is known as the union type operator. It allows a variable to hold one of several types, essentially broadening the range of acceptable values for that variable.

On the other hand, the double pipe (||) is the logical OR operator, used to evaluate expressions and return the first truthy value encountered, or the last value if all are falsy.

Why is this?

The union type (|) is vital for situations where a variable can legitimately represent multiple types, offering flexibility while maintaining type safety.

The logical OR operator (||), however, is often used in control flow to set default values or short-circuit evaluations, making it a powerful tool in conditional statements.

Use Case

Union Type (|): Suppose we're dealing with a function that can return a string or a number based on certain conditions. Using the union type allows us to define a return type that accommodates both possibilities.

  function getId(id: string | number): string {
    return `ID: ${id}`;
  }

Logical OR (||): We might want to assign a default value to a variable if it’s undefined or null. The logical OR operator helps us to do that efficiently.

  const username = inputUsername || 'Guest';

Pros and Cons

Union Type (|):
- Pros:
- Enhances flexibility and type safety.
- Reduces the need for extensive type checks.
Logical OR (||):
- Pros:
- Simplifies conditional logic.
- Provides a quick way to set default values.
- Cons:
- May lead to unintended consequences if falsy values are legitimate (e.g., 0, '').
- Overuse can reduce code clarity.

Conclusion

Both the union type (|) and the logical OR (||) operators are powerful tools in TypeScript, each with its specific use cases and benefits.

if you have any suggestions or questions let me know in comment.

[empty * n] Syntax in JavaScript

Akshat Soni — Sun, 18 Aug 2024 10:46:33 +0000

In JavaScript, we often encounter various syntaxes and constructs that may seem unusual at first glance. One such construct is the [empty * n] syntax.

In This blog will explore what this syntax means, its purpose, why it's useful, its pros and cons, and a concluding thought on its use.

What is the `[empty * n]` Syntax in JavaScript?

The [empty * n] syntax is a shorthand way to describe an array of n empty slots. In essence, it represents an array where each element is an empty slot, not undefined or null, but truly empty.

Example:

const emptyArray = Array(5);
console.log(emptyArray); // [empty × 5]

In this example, the emptyArray is created using the Array constructor with the argument 5. The output [empty × 5] signifies that the array has five empty slots.

Purpose of the `[empty * n]` Syntax

The [empty * n] syntax is primarily used to create arrays of a specified length without initializing the elements. This is particularly useful in situations where you want to reserve space for an array but plan to populate it later or need to perform operations where the indices are more important than the values.

Use Cases:

Initializing Arrays for Further Processing:
We might want to create an array of a certain size and fill it with values at a later point in our code.
Mapping Operations:
Using .map(), .fill(), or other array methods to populate the array after creation.
Creating Placeholder Arrays:
When working with large datasets, this syntax allows us to create an array of placeholders that can be efficiently filled later.

Why is it Useful?

The [empty * n] syntax can be a powerful tool in certain scenarios:

Performance: Creating an array with empty slots is faster than creating one with initialized values like undefined or null.
Flexibility: It allows developers to create a structure that can be manipulated later, offering greater flexibility in how arrays are utilized in the code.
Memory Efficiency: Since the elements are not initialized, it may lead to reduced memory usage in certain contexts.

Pros and Cons

Pros:

Quick Initialization:
Creating an array with a fixed length is quick and doesn't require specifying initial values.
Efficiency in Large Arrays:
When working with large arrays, this method can be more efficient in terms of both performance and memory usage.
Flexible Array Manipulation:
We can easily populate or modify the array using various methods such as .fill(), .map(), or even traditional loops.

Cons:

Lack of Readability:
The [empty * n] syntax can be confusing for those unfamiliar with it, making the code less readable.
Potential for Errors:
Since the slots are truly empty, certain array methods (e.g., .forEach(), .map()) may not behave as expected, leading to potential bugs.
Limited Use Cases:
This approach is not always suitable, particularly when specific initial values are required or when the array size needs to be dynamic.

Conclusion

The [empty * n] syntax in JavaScript is a useful construct for us who need to create arrays of a fixed length without initializing the elements. While it offers benefits in terms of performance and flexibility, it can also introduce challenges related to readability and potential errors. Understanding when and how to use this syntax can help us write more efficient and effective JavaScript code.

In this blog, If you have any doubt or suggestions.Please let me know in comments.

Preventing Data Leaks in React.js: A Deep Dive into useEffect

Akshat Soni — Sun, 11 Aug 2024 11:47:41 +0000

in this blog, I am writing about some data leaking problem and what is problem with that.

React.js is a powerful library for building user interfaces, but like any tool, it requires careful handling to avoid potential pitfalls. One such pitfall is data leaking, which can lead to performance issues and unexpected behavior in our applications.
Today, we're going to explore this concept, using a code example to illustrate both the problem and its solution.

Understanding Data Leaks in React

Data leaks in React often occur when components don't properly clean up after themselves. This is particularly common when working with side effects, such as setting up subscriptions or timers.
If these aren't properly managed, they can continue to run even after a component has unmounted, and this leading to memory leaks and potential errors.

Let's look at an example that demonstrates this issue:

useEffect(
    () => {
setInterval(() => {
            console.log('interval is running.')
        }, 20000);

    }, []
)

Analyzing the Code

This useEffect hook is setting up interval and mount it to DOM.

The Problem

While this code might seem fine at first glance, there's a subtle issue that could lead to a data leak. The problem lies here that when this component unmount then it does not clear interval. And if we give some dependency in dependency array then it rerender at all time but it does not clearing pervious interval so which we are doing in interval it happened to multiple time.

The Solution

To fix this issue, we need to ensure that we clear the previous interval before setting up a new one. Here's how we can modify the code:

useEffect(
    () => {
const interval = setInterval(() => {
            console.log('interval is running.')
        }, 20000);

return () => {
clearInterval(interval)
}
    }, []
)

In this updated version we first clear the interval which mount and then do new calculation.

Best Practices for Preventing Data Leaks

Always provide a cleanup function in useEffect when setting up subscriptions or timers.
Be mindful of your effect's dependencies. Make sure all variables used in the effect are included in the dependency array.

Conclusion

Data leaks in React can be subtle and hard to spot, but they can have significant impacts on our application's performance. By understanding how effects work and following best practices, we can write more robust and efficient React applications. Always remember to clean up after your effects, and be mindful of when and why they're running.

If any doubt regarding this let me know.

Decoding JavaScript: Mastering Null, Undefined, and Empty Values

Akshat Soni — Sun, 04 Aug 2024 09:10:04 +0000

As we know, JavaScript is a dynamically typed language, which can sometimes confuse us when dealing with empty or non-existent values. In this blog post, we'll explore the differences between null, undefined, empty strings, and empty arrays in JavaScript, with code examples to illustrate each concept.

1. Null

null is a deliberate non-value. It represents a variable that has been explicitly defined as having no value.

let myVariable = null;
console.log(myVariable); // Output: null
console.log(typeof myVariable); // Output: "object"

Note: typeof null returns object, which is a known quirk in JavaScript due to legacy reasons.

2. Undefined

undefined represents a variable that has been declared but hasn't been assigned a value yet.

let myUndefinedVariable;
console.log(myUndefinedVariable); // Output: undefined
console.log(typeof myUndefinedVariable); // Output: "undefined"

function myFunction(param) {
    console.log(param);
}
myFunction(); // Output: undefined

3. Empty String ('')

An empty string is a valid string with a length of zero.

let emptyString = '';
console.log(emptyString); // Output: ""
console.log(typeof emptyString); // Output: "string"
console.log(emptyString.length); // Output: 0

4. Empty Array ([])

An empty array is a list with no elements.

let emptyArray = [];
console.log(emptyArray); // Output: []
console.log(typeof emptyArray); // Output: "object"
console.log(Array.isArray(emptyArray)); // Output: true
console.log(emptyArray.length); // Output: 0

5. Comparison and Use Cases

Let's compare these different types:

console.log(null == undefined); // Output: true
console.log(null === undefined); // Output: false

console.log('' == null); // Output: false
console.log('' == undefined); // Output: false

console.log([] == null); // Output: false
console.log([] == undefined); // Output: false

console.log(Boolean(null)); // Output: false
console.log(Boolean(undefined)); // Output: false
console.log(Boolean('')); // Output: false
console.log(Boolean([])); // Output: true

Checking for null or undefined

function isNullOrUndefined(value) {
    return value == null;
}

console.log(isNullOrUndefined(null)); // Output: true
console.log(isNullOrUndefined(undefined)); // Output: true
console.log(isNullOrUndefined('')); // Output: false
console.log(isNullOrUndefined([])); // Output: false

Handling empty strings and arrays

function isEmpty(value) {
    if (typeof value === 'string') {
        return value.length === 0;
    }
    if (Array.isArray(value)) {
        return value.length === 0;
    }
    return false;
}

console.log(isEmpty('')); // Output: true
console.log(isEmpty([])); // Output: true
console.log(isEmpty('hello')); // Output: false
console.log(isEmpty([1, 2, 3])); // Output: false

6. Best Practices

Use null when you want to indicate that a variable has no value explicitly.
Let variables be undefined when they're not assigned a value.
Use empty strings ('') when you need a string with no characters.
Use empty arrays ([]) when you need a list with no elements.
Always use strict equality (===) unless you have a specific reason not to.
When checking for null or undefined, you can use value == null.

Conclusion

Understanding the differences between null, undefined, empty strings, and empty arrays is crucial for writing clean and bug-free JavaScript code. Each has its use cases and behaves differently in comparisons and type checks. By using these values correctly and knowing their nuances, you can write more robust and maintainable JavaScript applications.

Remember to always consider the context of your application when deciding which of these to use, and be consistent in your approach throughout your codebase.

The Hidden Dangers of Shallow Copying in JavaScript: Lessons from API Response Handling

Akshat Soni — Sun, 28 Jul 2024 08:36:58 +0000

Understanding Shallow vs Deep Copying in JavaScript: A Next.js API Example

One common pitfall I encounter is the difference between shallow and deep copying of objects, especially when dealing with nested data structures. This blog post will explore this issue through a real-world example involving an API response in a Next.js project.

Let's imagine that you have a default API response object defined as follows:

const defaultApiResponse: ApiResponse<any> = {
  data: [],
  success: false,
  message: "No data found",
  errors: [],
  status: 404
};

Now, you create an API endpoint that uses this default response as a template for building actual responses:

import { NextRequest, NextResponse } from 'next/server';
import prisma from '../../../../database/prismaClient';
import { defaultApiResponse } from '../ApiResponseType';

export async function GET(req: NextRequest) {
  const apiResponse = { ...defaultApiResponse };

  try {
    const { searchParams } = new URL(req.url);
    let product_id = searchParams.get('product_id');
    if (!product_id || isNaN(Number(product_id))) {
      apiResponse.errors.push("Product ID is required and must be a number");
      apiResponse.success = false;
      apiResponse.status = 400;
      return NextResponse.json(apiResponse);
    }
    const product = await prisma.product.findUnique({
      where: { id: Number(product_id) }
    });
    if (!product) {
      apiResponse.errors.push("Product not found");
      apiResponse.success = false;
      apiResponse.status = 404;
    } else {
      apiResponse.data.push(product);
      apiResponse.success = true;
      apiResponse.status = 200;
      apiResponse.message = "Product found";
    }
  } catch (error) {
    apiResponse.success = false;
    apiResponse.status = 500;
    apiResponse.errors.push(error.message || "An unknown error occurred");
  }
  return NextResponse.json(apiResponse);
}

Initially, this code seems correct. However, upon making several requests, you notice that the apiResponse object retains data from previous requests.

Why is this happening? 🤔

Due to Shallow Copy

But wait, what is Shallow copy? 🤔

Understanding Shallow Copy

The line:

const apiResponse = { ...defaultApiResponse };

uses the spread operator to create a new object. This is a shallow copy, meaning it only copies the top-level properties.

If any of these properties are objects or arrays (like data and errors), the new object will reference the same memory locations as the original.

Thus, modifying apiResponse.errors or apiResponse.data will also modify defaultApiResponse.errors and defaultApiResponse.data, leading to a persistent state across requests.

The Solution: Deep Copy

To prevent this issue, you need to ensure that each request gets a completely independent copy of the defaultApiResponse, including its nested arrays and objects.

One way to achieve this is by using a utility function to create a fresh copy:

Step 1: Create a utility function

// utils/apiResponse.ts
import { ApiResponse } from '../ApiResponseType';

export function getDefaultApiResponse<T>(): ApiResponse<T> {
  return {
    data: [],
    success: false,
    message: "No data found",
    errors: [],
    status: 404
  };
}

Step 2: Use the utility function in your API handler

import { NextRequest, NextResponse } from 'next/server';
import prisma from '../../../../database/prismaClient';
import { getDefaultApiResponse } from '../../../../utils/apiResponse';

export async function GET(req: NextRequest) {
  const apiResponse = getDefaultApiResponse<any>();

  try {
    const { searchParams } = new URL(req.url);
    let product_id = searchParams.get('product_id');
    if (!product_id || isNaN(Number(product_id))) {
      apiResponse.errors.push("Product ID is required and must be a number");
      apiResponse.success = false;
      apiResponse.status = 400;
      return NextResponse.json(apiResponse);
    }
    const product = await prisma.product.findUnique({
      where: { id: Number(product_id) }
    });
    if (!product) {
      apiResponse.errors.push("Product not found");
      apiResponse.success = false;
      apiResponse.status = 404;
    } else {
      apiResponse.data.push(product);
      apiResponse.success = true;
      apiResponse.status = 200;
      apiResponse.message = "Product found";
    }
  } catch (error) {
    apiResponse.success = false;
    apiResponse.status = 500;
    apiResponse.errors.push(error.message || "An unknown error occurred");
  }
  return NextResponse.json(apiResponse);
}

Now you need to think about Why This Works. 🤔

So to answer this:

The utility function getDefaultApiResponse ensures that every request handler invocation starts with a fresh, deep copy of the default response. This prevents shared references and ensures that modifications to apiResponse do not affect defaultApiResponse or other instances of apiResponse.

Conclusion

Understanding the difference between shallow and deep copying in JavaScript is crucial when dealing with objects and arrays. Shallow copies can lead to unintended side effects, especially in stateful applications like APIs.

By using utility functions to create fresh copies of default objects, you can avoid these pitfalls and ensure your code remains clean and maintainable.

Thanks for reading my post. If you have any questions regarding this, let me know.

DEV Community: Akshat Soni

Understanding Array Mutation in Redux: A Common Pitfall with useSelector

What is the Problem?

Why Does This Happen?

What is the Best Process?

Example of the Correct Approach:

Best Practices for Handling Redux State

Conclusion

Understanding the Key Differences Between | and || in TypeScript

What is this?

Why is this?

Use Case

Pros and Cons

Conclusion

[empty * n] Syntax in JavaScript

What is the [empty * n] Syntax in JavaScript?

Example:

Purpose of the [empty * n] Syntax

Use Cases:

Why is it Useful?

Pros and Cons

Pros:

Cons:

Conclusion

Preventing Data Leaks in React.js: A Deep Dive into useEffect

Understanding Data Leaks in React

The Problem

The Solution

Best Practices for Preventing Data Leaks

Conclusion

Decoding JavaScript: Mastering Null, Undefined, and Empty Values

1. Null

2. Undefined

3. Empty String ('')

4. Empty Array ([])

5. Comparison and Use Cases

Checking for null or undefined

Handling empty strings and arrays

6. Best Practices

Conclusion

The Hidden Dangers of Shallow Copying in JavaScript: Lessons from API Response Handling

Understanding Shallow vs Deep Copying in JavaScript: A Next.js API Example

Due to Shallow Copy

Understanding Shallow Copy

The Solution: Deep Copy

Step 1: Create a utility function

Step 2: Use the utility function in your API handler

Conclusion

What is the `[empty * n]` Syntax in JavaScript?

Purpose of the `[empty * n]` Syntax