DEV Community: Nahidul Islam

Understanding useRef in React (Without the Confusion)

Nahidul Islam — Thu, 08 Jan 2026 16:48:51 +0000

If you’ve been learning React, you’ve likely mastered useState and useEffect. But then you run into useRef, and suddenly things feel… a bit weird.

It doesn’t update the screen. It doesn't trigger re-renders. It feels like it’s breaking the "React rules." But here is the secret: useRef is your component’s private, persistent storage.

Let’s break down what it actually does, why it’s useful, and how to use it without the headache.

What `useRef` Actually Is

At its core, useRef gives you a place to store a value that:

stays the same between renders
can be changed anytime
does not cause a re-render when it changes

That’s it.

const myRef = useRef(initialValue);

React gives you an object that looks like this:

{ current: initialValue }

The important part is .current.
That’s where the value lives.

React creates this object once and keeps returning the same one on every render.

Why `useRef` Exists at All

You might wonder: "Why not just use useState for everything?" The difference comes down to visibility.

State is for things you want the user to see (UI). When state changes, React re-paints the screen.

Refs are for things you want to remember behind the scenes. When a ref changes, React stays silent and does nothing to the UI.

Some things are just helpers:
a DOM element

a timer ID

a WebSocket connection

a previous value

a flag or counter

If you put these in state, React will re-render for no reason.
If you use normal variables, they reset on every render.

useRef solves this exact problem.

It gives you memory without triggering renders.

The Most Common Use: Accessing the DOM

This is where most people meet useRef first.

const inputRef = useRef(null);

<input ref={inputRef} />

<button onClick={() => inputRef.current.focus()}>
  Focus
</button>

Here’s what’s happening:

React puts the real DOM input element into inputRef.current
You can call methods like focus() directly

This is the correct way to:

focus inputs
scroll elements into view
measure width or height
control video or audio elements

DOM nodes don’t belong in state.
Refs are the right tool.

Keeping Values Between Renders (Without Re-rendering)

Sometimes you need to remember something, but you don’t want React involved.

Example: counting how many times a component renders.

const renderCount = useRef(0);
renderCount.current += 1;

This value:

increases on every render
never causes a re-render
never resets

This pattern is useful for:

counters
flags
cached data
internal bookkeeping

Tracking the Previous Value

React doesn’t give you “previous state” by default.

useRef fills that gap.

const prevValue = useRef(value);

useEffect(() => {
  prevValue.current = value;
}, [value]);

Now:

value is the current value
prevValue.current is the previous one

This is clean, predictable, and widely used in real applications.

Storing External Objects

Some things don’t belong to React at all:

WebSocket connections
AbortController
observers
third-party libraries

const socketRef = useRef(null);

useEffect(() => {
  socketRef.current = new WebSocket(url);

  return () => socketRef.current.close();
}, []);

These objects need to live somewhere stable.
useRef is that place.

Putting them in state would be a design mistake.

What useRef Is Not

This matters.

useRef is not:

a replacement for useState
reactive
meant to update the UI

If the UI depends on a value, use state.
If React doesn’t need to know about it, use a ref.

That rule alone prevents most mistakes.

A Simple Mental Model

Think of useRef like a small box attached to your component.

React renders the component
The box stays the same
You can put anything inside
React ignores it completely

That’s the deal.

Final Thoughts

useRef isn’t complicated.
It’s just honest.

It gives you a place to store things React shouldn’t manage.

Once you understand that, it stops feeling “advanced” and starts feeling obvious.

And when it finally clicks, your components become:

cleaner
more predictable
easier to reason about

That’s not magic.
That’s just using the right tool for the right job.

🙋🏻‍♂️ Explore my portfolio ✨
This is where innovation meets expertise ✨ — a carefully crafted showcase of my professional journey. Dive into a world where each project tells its own story of challenges conquered 🏆 and solutions crafted 🛠️. While my portfolio demonstrates technical prowess 💻, it also reflects my passion for pushing boundaries 🚀 and thinking beyond conventional limits 🌌. Ready to connect? 🤝 Find me on LinkedIn for the full story of my professional adventure, and let’s explore potential collaborations. Together, we might just create something extraordinary 🌟.

Understanding Generics in TypeScript: The Ultimate Guide to Reusable Code

Nahidul Islam — Sat, 17 May 2025 05:55:19 +0000

🚀 What Are Generics in TypeScript?

When developing applications, we often need flexibility while maintaining type safety. TypeScript’s Generics solve this challenge by allowing us to create reusable components that can work with multiple data types.

In this guide, we’ll break down generics step by step, ensuring you fully understand how to use them efficiently.

🎯 Why Should You Learn Generics?

Without generics, you would need separate functions for different data types. For example:

function returnString(value: string): string {
  return value;
}

function returnNumber(value: number): number {
  return value;
}

This approach leads to redundant code. Generics solve this problem by creating a single function that works for all types.

🏆 Understanding Generics with a Simple Example

Generics use a placeholder type, such as <T>, allowing a function to handle various data types dynamically.

function returnValue<T>(value: T): T {
  return value;
}

Now, this function works for any type:

console.log(returnValue<string>("Hello Generics!"));  // "Hello Generics!"
console.log(returnValue<number>(123));               // 123
console.log(returnValue<boolean>(true));             // true
console.log(returnValue<object>({ name: "TypeScript" })); // { name: "TypeScript" }

This is the power of generics — one function that adapts to different types while maintaining type safety.

🏗️ Applying Generics in Classes

If you’re working with data storage, you can use generics in a class to make it flexible yet secure:

class Storage<T> {
  private item: T;

  setItem(value: T) {
    this.item = value;
  }

  getItem(): T {
    return this.item;
  }
}

// Using the class with different types
const stringStorage = new Storage<string>();
stringStorage.setItem("Understanding Generics is fun!");
console.log(stringStorage.getItem()); // "Understanding Generics is fun!"

const numberStorage = new Storage<number>();
numberStorage.setItem(42);
console.log(numberStorage.getItem()); // 42

Since Generics preserve type integrity, you won’t accidentally store numbers in a string container.

🔗 Generics in Interfaces for Flexible Object Type

You can apply generics in interfaces to create highly adaptable structures.

interface User<T> {
  id: number;
  data: T;
}

const user1: User<string> = { id: 1, data: "Admin" };
const user2: User<number[]> = { id: 2, data: [10, 20, 30] };

console.log(user1); // { id: 1, data: "Admin" }
console.log(user2); // { id: 2, data: [10, 20, 30] }

Here, data can be any type, making the interface highly reusable.

🔥 Adding Constraints to Generic

If you want **restrictions **on the generic type, use extends:

function getLength<T extends { length: number }>(item: T): number {
  return item.length;
}

console.log(getLength("Understanding Generics"));  // ✅ Works (strings have `.length`)
console.log(getLength([1, 2, 3]));                 // ✅ Works (arrays have `.length`)
console.log(getLength({ length: 10 }));            // ✅ Works (objects with length are allowed)

Here, T extends { length: number } ensures that only values with a .length property are accepted.

🚀 Benefits of Generics in TypeScript

Write Less Code — One function or class for multiple types.
Increase Flexibility — Works with different data types while enforcing type safety.
Improve Maintainability — No need to refactor when adding new types.
Future-Proof Applications — Generics scale easily as your codebase grows. Generics are essential in TypeScript and make your code efficient, clean, and reusable.

🎯 Final Challenge: Try Generics Yourself

Want to test your understanding of generics? Try writing a generic function that adds two values — it should work for both numbers and strings! Drop your solution in the comments below.

🙋🏻‍♂️ Explore my portfolio ✨
This is where innovation meets expertise ✨ — a carefully crafted showcase of my professional journey. Dive into a world where each project tells its own story of challenges conquered 🏆 and solutions crafted 🛠️. While my portfolio demonstrates technical prowess 💻, it also reflects my passion for pushing boundaries 🚀 and thinking beyond conventional limits 🌌. Ready to connect? 🤝 Find me on LinkedIn for the full story of my professional adventure, and let’s explore potential collaborations. Together, we might just create something extraordinary 🌟.

Understanding MongoDB's distinct() Operation: A Practical Guide

Nahidul Islam — Sat, 28 Sep 2024 17:28:36 +0000

MongoDB's distinct() operation is a powerful tool for retrieving unique values from a specified field across a collection. This guide will help you understand what distinct() does, why and when to use it, and how to implement it effectively in your MongoDB queries.

What is distinct()?

The distinct() method returns an array of unique values for a specified field across a collection or a subset of a collection. It eliminates duplicate values, giving you a clear view of the different values present in a particular field.

Why Use distinct()?

Data Analysis: Quickly understand the range of values in a field.
Data Cleaning: Identify inconsistencies or unexpected values.
Reporting: Generate summaries or reports based on unique categories.
Efficiency: Retrieve unique values without the need for client-side processing.

When to Use distinct()?

Use distinct() when you need to:

Get a list of all unique categories in your data
Check for data consistency
Prepare data for dropdown menus or filter options in your application
Perform aggregations on unique values

How to Use distinct()

The basic syntax for distinct() is:

db.collection.distinct(field, query, options)

field: The field for which to return distinct values
query (optional): A query that specifies the documents to search
options (optional): Additional options for the operation

Real-Life Example: E-commerce Product Catalog

Imagine you're managing an e-commerce platform that sells electronics. You have a products collection with fields like category, brand, price, etc. Let's explore how distinct() can be useful in this scenario.

Example 1: List All Unique Product Categories

To get a list of all unique product categories:

db.products.distinct("category")

This might return:

["Smartphones", "Laptops", "Tablets", "Smartwatches", "Headphones"]

This list could be used to populate a category filter on your website.

Example 2: Find Unique Brands in a Specific Category

To get all the unique brands that offer smartphones:

db.products.distinct("brand", { category: "Smartphones" })

Result:

["Apple", "Samsung", "Google", "OnePlus", "Xiaomi"]

This information could be used for brand-specific promotions or inventory analysis.

Example 3: Price Points for Premium Products

To find distinct price points for products over $1000:

db.products.distinct("price", { price: { $gt: 1000 } })

Result:

[1099, 1299, 1499, 1799, 2099]

This data could help in understanding price clustering for premium products.

Best Practices and Considerations

Index Usage: Ensure the field you're using with distinct() is indexed for better performance, especially on large collections.
Memory Limitations: Be cautious when using distinct() on fields with high cardinality (many unique values) as it can consume significant memory.
Combine with Aggregation: For more complex scenarios, consider using distinct() within an aggregation pipeline for greater flexibility.
Data Types: distinct() treats different data types as distinct. For example, the string "5" and the number 5 would be considered different values.

By mastering the distinct() operation, you can efficiently extract unique values from your MongoDB collections, leading to better data insights and more effective application features.

Drop me an email here: nahidul7562@gmail.com

Follow me on: 🙋🏻‍♂️

Explore my portfolio

Welcome to my professional portfolio website—a curated glimpse into my professional world. Here, you'll find:

🌟 A collection of standout projects highlighting my expertise
🚀 Insights into my career trajectory and key achievements
💼 A showcase of my diverse skills and competencies

Whether you're seeking inspiration, exploring collaboration opportunities, or simply curious about my work, I invite you to peruse my portfolio.

Your visit could be the first step towards a valuable professional connection. 🤝 Thank you for your interest—I look forward to the possibilities our interaction might bring. 😊

TypeScript Generics: Building Flexible and Reusable Components

Nahidul Islam — Sun, 28 Jul 2024 05:43:17 +0000

TypeScript, a statically typed superset of JavaScript, has gained immense popularity among developers for its ability to catch errors at compile-time and improve code quality. One of TypeScript's most powerful features is generics, which allow you to write flexible, reusable code that works with multiple data types while maintaining type safety. In this article, we'll dive deep into TypeScript generics, exploring how they can help you create more robust and adaptable components and functions.

What are Generics?

When I first encountered generics, I thought of them as a way to create reusable code components that can work with different data types. Instead of specifying a particular type, we use a type parameter that acts as a placeholder. This allows us to write functions, classes, and interfaces that can operate on various data types while still providing type checking and intellisense support.

Why should we use Generics?

In my experience, there are several compelling reasons to use generics:

Type Safety: Generics provide compile-time type checking, helping us catch errors early.
Code Reusability: We can write once and use with multiple types.
Flexibility: We can create components that work with various data structures.
Better Intellisense: Our IDEs can provide better code completion and hints.

Basic Syntax

Let's start with a simple example to illustrate the syntax of generics:

function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("Hello, Generics!");
let output2 = identity(42);

console.log(output1); // "Hello, Generics!"
console.log(output2); // 42

In this example, we use <T> as a type parameter. When we call the function, we can either explicitly specify the type (as in output1) or let TypeScript infer it based on the argument (as in output2).

Practical Examples

Generic Functions

Let's look at a more practical example. Here's a function I often use to reverse an array of any type:

function reverseArray<T>(array: T[]): T[] {
    return array.reverse();
}

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = reverseArray(numbers);
console.log(reversedNumbers); // [5, 4, 3, 2, 1]

const fruits = ["apple", "banana", "cherry"];
const reversedFruits = reverseArray(fruits);
console.log(reversedFruits); // ["cherry", "banana", "apple"]

This reverseArray function works with arrays of any type, maintaining type safety throughout.

Generic Interfaces

I've found that generics are not limited to functions. We can also use them with interfaces to create flexible data structures:

interface KeyValuePair<TKey, TValue> {
    key: TKey;
    value: TValue;
}

let pair1: KeyValuePair<string, number> = { key: "age", value: 30 };
let pair2: KeyValuePair<number, boolean> = { key: 1, value: true };

This KeyValuePair interface can be used with different types for both the key and the value.

Generic Classes

In my projects, I've found generics particularly useful when creating reusable class components. Here's an example of a generic Stack class I often use:

class Stack<T> {
    private items: T[] = [];

    push(item: T): void {
        this.items.push(item);
    }

    pop(): T | undefined {
        return this.items.pop();
    }

    peek(): T | undefined {
        return this.items[this.items.length - 1];
    }

    isEmpty(): boolean {
        return this.items.length === 0;
    }
}

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
numberStack.push(3);

console.log(numberStack.pop()); // 3
console.log(numberStack.peek()); // 2

const stringStack = new Stack<string>();
stringStack.push("Hello");
stringStack.push("World");

console.log(stringStack.pop()); // "World"
console.log(stringStack.isEmpty()); // false

This Stack class can be used with any data type, providing type-safe operations for pushing, popping, and peeking at elements.

Advanced Generic Techniques

Constraints

Sometimes we want to restrict the types that can be used with our generic components. We can do this using constraints:

interface Lengthwise {
    length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
    console.log(arg.length);
}

logLength("Hello"); // 5
logLength([1, 2, 3]); // 3
logLength({ length: 10 }); // 10
// logLength(3); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'

In this example, T extends Lengthwise ensures that the argument passed to logLength has a length property.

Generic Type Aliases

I've found that type aliases can also leverage generics:

type Nullable<T> = T | null;
type Pair<T> = [T, T];

let nullableNumber: Nullable<number> = 5;
nullableNumber = null;

let coordinates: Pair<number> = [10, 20];

Conclusion

Generics are a fantastic feature of TypeScript that help us write code that is both flexible and type-safe. By leveraging generics, we can build reusable components and functions that work with various types while ensuring type consistency. We hope this guide gives us a solid understanding of how to use generics effectively in our TypeScript projects.

Let’s experiment with generics in our own code and see how they can make our development process smoother and more efficient!

Drop me an email here: nahidul7562@gmail.com

Follow me on: 🙋🏻‍♂️

Explore my portfolio

Welcome to my professional portfolio website—a curated glimpse into my professional world. Here, you'll find:

🌟 A collection of standout projects highlighting my expertise
🚀 Insights into my career trajectory and key achievements
💼 A showcase of my diverse skills and competencies

Whether you're seeking inspiration, exploring collaboration opportunities, or simply curious about my work, I invite you to peruse my portfolio.

Your visit could be the first step towards a valuable professional connection. 🤝 Thank you for your interest—I look forward to the possibilities our interaction might bring. 😊

Access Modifiers in TypeScript: The Gatekeepers

Nahidul Islam — Wed, 12 Jun 2024 04:24:37 +0000

Access modifiers in TypeScript are essential tools for managing the accessibility of class members (properties and methods) within our code. By controlling who can access and modify these members, access modifiers help us implement encapsulation, a core principle of object-oriented programming. We can use class members within their own class, from anywhere outside the class, or within any child or derived class.

Access modifiers in TypeScript act as gatekeepers, controlling the visibility and accessibility of class members. They prevent invalid usage and maintain data integrity. If not explicitly set, TypeScript automatically assigns the public modifier, making all members accessible from anywhere.

TypeScript provides three primary access modifiers: public, private, and protected. Let's explore each one in detail.

1. Public

The public modifier is the default access level in TypeScript. When a class member is marked as public, it means that the member can be accessed from anywhere: inside the class, outside the class, or even in subclasses. If we do not specify an access modifier, the member is implicitly public.

Example:

class Animal {
    public name: string;

    constructor(name: string) {
        this.name = name;
    }

    public move(distance: number): void {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

const dog = new Animal('Dog');
dog.move(10); // Accessible
console.log(dog.name); // Accessible

In the example above, both the name property and the move method are public, allowing unrestricted access.

2. Private

The private modifier restricts access to the member only within the class it is defined. This means that private members cannot be accessed or modified from outside the class, including in derived classes.

Example:

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    public move(distance: number): void {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

const cat = new Animal('Cat');
cat.move(5); // Accessible
// console.log(cat.name); // Error: Property 'name' is private and only accessible within class 'Animal'.

Here, the name property is private, so attempting to access cat.name from outside the class results in an error.

3. Protected

The protected modifier allows access to the member within the class it is defined and in any subclass derived from it. However, it still restricts access from outside these classes.

Example:

class Animal {
    protected name: string;

    constructor(name: string) {
        this.name = name;
    }

    protected move(distance: number): void {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

class Bird extends Animal {
    public fly(distance: number): void {
        console.log(`${this.name} is flying.`);
        this.move(distance); // Accessible
    }
}

const eagle = new Bird('Eagle');
eagle.fly(20); // Accessible
// eagle.move(20); // Error: Property 'move' is protected and only accessible within class 'Animal' and its subclasses.

In this example, the name property and the move method are protected, allowing the Bird class to access them. However, trying to call move on an instance of Bird from outside the class hierarchy results in an error.

Combining Access Modifiers with Constructors

TypeScript allows us to declare and initialize properties directly in the constructor, using access modifiers.

Example:

class Person {
    constructor(public name: string, private age: number) {}

    public getAge(): number {
        return this.age;
    }
}

const john = new Person('John', 30);
console.log(john.name); // Accessible
console.log(john.getAge()); // Accessible
// console.log(john.age); // Error: Property 'age' is private and only accessible within class 'Person'.

In this case, name is public, so it can be accessed freely, while age is private, restricting access to within the class.

Why Use Access Modifiers?

Encapsulation: By using access modifiers, we can hide the internal implementation details of a class from the outside world, exposing only what is necessary.
Maintainability: Properly encapsulated code is easier to understand and maintain because it clearly defines the boundaries of what can and cannot be accessed.
Flexibility: Encapsulation allows us to change the internal implementation without affecting external code, as long as the public interface remains consistent.
Error Prevention: Restricting access to critical parts of our code helps prevent unintended modifications, reducing the risk of bugs.

Access Modifiers at a Glance

The table below summarizes the accessibility of class members based on their access modifiers:

Conclusion

Access modifiers in TypeScript are a powerful feature that help us write safer, more maintainable code by controlling the visibility of class members. By understanding and using public, private, and protected effectively, we can create well-encapsulated classes that are easier to work with and less prone to errors. Whether we're just starting with TypeScript or looking to refine our skills, mastering access modifiers is a key step in becoming proficient developers.

Drop me an email here: nahidul7562@gmail.com

Follow me on: 🙋🏻‍♂️

Explore my portfolio

Welcome to my professional portfolio website—a curated glimpse into my professional world. Here, you'll find:

🌟 A collection of standout projects highlighting my expertise
🚀 Insights into my career trajectory and key achievements
💼 A showcase of my diverse skills and competencies

Whether you're seeking inspiration, exploring collaboration opportunities, or simply curious about my work, I invite you to peruse my portfolio.

Your visit could be the first step towards a valuable professional connection. 🤝 Thank you for your interest—I look forward to the possibilities our interaction might bring. 😊

Exploring Basic Data Types in TypeScript

Nahidul Islam — Tue, 28 May 2024 06:14:07 +0000

TypeScript is a powerful, statically typed superset of JavaScript that helps developers write more robust and maintainable code. Understanding the basic data types in TypeScript is essential for beginners to leverage its full potential. In this article, we'll explore the fundamental data types: string, number, array, object, null, undefined, function, never, type alias, and type alias in function.

1. String

A string in TypeScript is used to represent textual data. It's a sequence of characters and is enclosed in single ('), double ("), or backticks.

let message: string = "Hello, TypeScript!"
console.log(message) // output: "Hello, TypeScript!"

You can also use template literals (enclosed by backticks) to embed expressions:

let userName: string = "Alice";
let greeting: string = `Hello, ${userName}!`;
console.log(greeting) // output: Hello, Alice!

2. Number

A number in TypeScript can represent both integer and floating-point values. TypeScript uses the number type to cover all numeric values, including special values like Infinity and NaN.

let myNumber: number = 5;
let myFloat: number = 19.71;
let myInfinity: number = Infinity;
console.log(myNumber) // output: 5
console.log(myFloat) // output: 19.71
console.log(myInfinity) // output: Infinity

3. Array

An array in TypeScript is used to store a collection of elements of a specific type. You can define an array using the Array<type> syntax or the type[] syntax.

let myArray: number[] = [1, 2, 3, 4, 5];
let myStringArray: Array<string> = ["one", "two", "three"];
console.log(myArray); // Output: [1, 2, 3, 4, 5]
console.log(myStringArray); // Output: ["one", "two", "three"]

4. Object

An object in TypeScript is a collection of key-value pairs, where the keys are strings (or symbols) and the values can be of any type. You define the shape of an object using an interface or a type alias.

let myObject: { name: string, age: number } = { name: "John", age: 30 };
console.log(myObject); // Output: { name: "John", age: 30 }

Using an interface:

interface Person {
  name: string;
  age: number;
}
let anotherPerson: Person = { name: "Jane", age: 25 };
console.log(anotherPerson); // Output: { name: "Jane", age: 25 }

5. Null & Undefined

null and undefined are special types that represent the absence of a value. null is often used to explicitly indicate the absence of a value, whereas undefined typically means a variable has been declared but not yet assigned a value.

let myNull: null = null;
let myUndefined: undefined = undefined;
console.log(myNull); // Output: null
console.log(myUndefined); // Output: undefined

Variables without an initial assignment default to undefined:

let notAssigned;
console.log(notAssigned); // Output: undefined

6. Function

A function in TypeScript is a block of code that performs a specific task. Functions can accept parameters and return a value. TypeScript allows you to define the types of the parameters and the return type.

function greet(name: string): string {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

A function with no return value can be specified with the void return type:

function logMessage(message: string): void {
  console.log(message);
}
logMessage("This is a message."); // Output: This is a message.

7. Never

The never type represents values that never occur. It's typically used for functions that always throw an error or functions that never return.

function error(message: string): never {
  throw new Error(message);
}
try {
  error("Something went wrong!");
} catch (e) {
  console.error(e); // Output: Error: Something went wrong!
}

A function that never returns (infinite loop):

function infiniteLoop(): never {
  while (true) {}
}

8. Type Alias

A type alias creates a new name for a type. This can be especially useful for simplifying complex type definitions or when you want to give a type a meaningful name.

type Point = { x: number, y: number };
let myPoint: Point = { x: 10, y: 20 };
console.log(myPoint); // Output: { x: 10, y: 20 }

Using a type alias for union types:

type ID = number | string;
let userId: ID = 101;
let anotherId: ID = "user101";
console.log(userId); // Output: 101
console.log(anotherId); // Output: user101

9. Type Alias in Function

Type aliases can be used in function signatures for better readability and maintainability. This allows you to reuse complex type definitions across multiple functions.

type Greeting = (name: string) => string;
const sayHello: Greeting = (name) => `Hello, ${name}!`;
console.log(sayHello("Bob")); // Output: Hello, Bob!

Combining type aliases with objects:

type Person = { name: string, age: number };
type Introduce = (person: Person) => string;

const introduce: Introduce = (person) => `My name is ${person.name} and I am ${person.age} years old.`;
console.log(introduce({ name: "Charlie", age: 28 })); // Output: My name is Charlie and I am 28 years old.

Conclusion

Understanding the basic data types in TypeScript is crucial for writing effective and type-safe code. These types form the foundation upon which more complex types and structures are built. By mastering string, number, array, object, null & undefined, function, never, and type aliases, you'll be well-equipped to handle a wide range of programming scenarios. TypeScript’s type system not only helps catch errors early but also makes your code more readable and maintainable. As you continue to explore TypeScript, you'll find that these basics will serve as a strong foundation for more advanced concepts and techniques.

Drop me an email here: nahidul7562@gmail.com

Follow me on: 🙋🏻‍♂️

Explore my portfolio

Welcome to my professional portfolio website—a curated glimpse into my professional world. Here, you'll find:

🌟 A collection of standout projects highlighting my expertise
🚀 Insights into my career trajectory and key achievements
💼 A showcase of my diverse skills and competencies

Whether you're seeking inspiration, exploring collaboration opportunities, or simply curious about my work, I invite you to peruse my portfolio.

Your visit could be the first step towards a valuable professional connection. 🤝 Thank you for your interest—I look forward to the possibilities our interaction might bring. 😊

Exploring the Power of Union and Intersection Types in TypeScript

Nahidul Islam — Fri, 10 May 2024 04:49:31 +0000

TypeScript, a supercharged version of JavaScript crafted by Microsoft, brings a new level of reliability and scalability to web development. One of its most powerful features is its type system, which not only enhances tooling and detects errors early but also offers advanced tools for handling complex data structures. Among these tools, union and intersection types stand out, offering remarkable flexibility and clarity in code.

Understanding Union Types

Union types enable us to define types that can hold different kinds of values. Imagine we’re creating a function that can accept either strings or numbers. With union types, TypeScript ensures that our function can handle both scenarios correctly. Let’s dive into an example:

function checkInputType(value: string | number) {
    if (typeof value === "string"){
        console.log("This is a string");
    }
    else {
        console.log("This is a number");
    }
}

checkInputType('hello'); // Output: This is a string
checkInputType(30);      // Output: This is a number

Here, checkInputType can take either a string or a number as its argument. TypeScript guarantees that we handle both possibilities properly. If we try passing any other type, TypeScript will flag it as an error during compilation, ensuring type safety.

Unveiling Intersection Types

Intersection types, on the other hand, let us merge multiple types into a single one, incorporating all the properties and methods from each type. This proves invaluable when dealing with object types and creating composite types from existing ones. Let’s illustrate this with an example:

interface DeviceName {
  brand: string;
  model: string;
}

interface DeviceInfo {
  ram: number;
  rom: number;
  camera: string;
}

type DeviceDetails = DeviceName & DeviceInfo;

const samsungMobile: DeviceDetails = {
  brand: 'Samsung',
  model: 'S20',
  ram: 6,
  rom: 128,
  camera: '50 MP'
};

In this snippet, DeviceDetails combines the properties of both DeviceName and DeviceInfo interfaces. This allows us to create objects that fulfil the requirements of both interfaces, ensuring our data adheres to a specific structure.

Embracing the Benefits

Union and intersection types are not just fancy jargon; they’re essential tools for writing robust, maintainable code. By leveraging these features, we catch bugs early in the development process and make our code more adaptable and understandable. Whether you’re a seasoned developer or just starting, mastering union and intersection types in TypeScript will undoubtedly elevate your programming prowess.

Drop me an email here: nahidul7562@gmail.com

Follow me on: 🙋🏻‍♂️

Explore my portfolio

Welcome to my professional portfolio website—a curated glimpse into my professional world. Here, you'll find:

🌟 A collection of standout projects highlighting my expertise
🚀 Insights into my career trajectory and key achievements
💼 A showcase of my diverse skills and competencies

Whether you're seeking inspiration, exploring collaboration opportunities, or simply curious about my work, I invite you to peruse my portfolio.

Your visit could be the first step towards a valuable professional connection. 🤝 Thank you for your interest—I look forward to the possibilities our interaction might bring. 😊

Reusable Code: React Custom Hooks Guide

Nahidul Islam — Fri, 23 Feb 2024 13:49:00 +0000

React's functional components have gained significant popularity due to the introduction of hooks, which allow developers to manage state and side effects more efficiently. One powerful feature is the ability to create custom hooks, enabling the reuse of logic across different components. In this article, I’ll explain the concept of custom hooks in React and guide you through the process of creating them. First, if you are new, let’s get introduced to React Hooks. What are they and why are they?

Unveiling the Essence of Hooks

Hooks, introduced in React 16.8, are functions that allow us to "hook into" React features without writing a full class component.
They provide access to state, side effects, context, and other React features without the need for class lifecycle methods.
Common built-in hooks include useState, useEffect, useContext, useMemo, useReducer, and more.

When should we consider custom hooks?

As mentioned earlier, custom hooks are JavaScript functions that utilize one or more of the existing hooks, allowing you to encapsulate and reuse logic across components. They follow a naming convention: starting with use helps identify them as hooks.

Shared Logic: If we find ourselves replicating logic across multiple components, a custom hook can encapsulate that logic for reuse.
Component Complexity: When a component becomes complex with state management and side effects, a custom hook can enhance the clarity and organization of our codebase.
State Management: Custom hooks empower us to create custom state management solutions tailored to our specific needs.

Crafting the first custom hook

Imagine we have this situation: our application needs to use the logged-in user's data in multiple places. Instead of fetching this data from the database in every component separately, we can make our lives easier. That's where custom hooks come in handy.

Think of it as our assistant. We tell it once to get the user data, and then we can call on it from any component whenever we need that information. It's like saying, "Hey assistant, give me the user data," and it takes care of the rest. This way, we don't have to repeat the same fetching process in every nook and cranny of our application. It's a smart way of saying, "Do it once, use it everywhere."

Let’s go through the processes:

1. Name: Start your hook function name with use to indicate its purpose. In our case, we are naming it, “useUserData”
2. Logic: To fetch data, we need Axios (or you can use fetch), useEffect and useState to store data, error and loading state.

import { useState, useEffect } from 'react';
import axios from 'axios'; // if you don't have Axios installed in your project, first install it

const useUserData = () => {

    // let’s take a dummy email
    const email = "dummy@email.com";

    // get necessary react hooks
    const [isLoading, setIsLoading] = useState(false);
    const [currentUserData, seCurrentUserData] = useState(null);
    const [error, setError] = useState(null);

    // URL
    const url = 'dummy URL' // use your own URL

    useEffect(() => {
        const fetchData = async () => {
            setIsLoading(true);
            try {
                const response = await axios.get(url); // Use Axios to make the GET request
                const data = response.data; // Axios automatically parses JSON responses
                seCurrentUserData(data);
            } catch (error) {
                setError(error);
            } finally {
                setIsLoading(false);
            }
        };
        fetchData();
    }, [url]);


    return { isLoading, currentUserData, error }
};
export default useUserData;

3. Use the custom hook in components: Now we are ready to use the custom hook in our component wherever it is needed.

import useUserData from './useUserData'; // your own path to import


const MyComponent = () => {


    // get the custom hook
    const { isLoading, currentUserData, error } = useUserData();

    // conditional loading for loading state
    if (isLoading) {
        return <p>Loading...</p>;
    }
    // if there is any error
    if (error) {
        return <p>Error: {error.message}</p>;
    }

    // Imagine this is the dummy data in 'currentUserData'
/*
{
    "id": 123,
    "name": "John Doe",
    "email": "john.doe@example.com",
    "birthDate": "1990-01-01",
    "imageURL": "https://example.com/john_doe.jpg",
    "role": "user"
  }
*/

    return (
        <div>
            <h1>Data from API</h1>
            <p>{currentUserData?.name}</p>
        </div>
    );
};


export default MyComponent;

Conclusion

By following these steps, we can successfully create and integrate a custom hook into your React application. By mastering custom hooks, we unlock a powerful way to structure our React applications. This approach encourages us to reuse code, facilitating easier maintenance and ensuring a clear distinction between different aspects of our application.

Follow me on: LinkedIn

How to Implement Pagination in MERN-Stack Applications

Nahidul Islam — Thu, 15 Feb 2024 14:56:43 +0000

Pagination isn’t just about aesthetics. It is crucial for user experience and performance. Pagination breaks down information into digestible chunks, making it easier for users to navigate, find what they need quickly, and avoid information overload. It's a win-win for both sides: users appreciate the faster loading times and focused content, while websites benefit from improved performance, better SEO due to unique content on each page, and ultimately, a happier user experience.

In this guide, we'll learn how to add pagination to a MERN stack project. That's using React.js for the front-end, which talks to the back-end Express APIs. As the database, We'll use MongoDB, and Node.js for handling back-end tasks, to make a user-friendly pagination system. To do data fetching, we’ll use Axios and TanStack Query. When we're done, you'll grasp how to set up and use pagination effectively.

Front-end (React.js)

We will create states to deal with the currently selected page and to store the total amount of page data that is coming from the back-end. At the initial stage, the currently selected page will be ‘1’.

    const [currentPage, setCurrentPage] = useState(1);
    const [totalPageAmount, setTotalPageAmount] = useState(0);

    //Fetch data using Axios and TanStack
    const { isPending: paginatedDataPending, data: paginatedData } = useQuery({
        queryKey: ["paginated-data", currentPage],
        queryFn: async () => {
            const res = await axios.get(`local-host-address/paginatedDataApi?dataPerPage=10&currentPage=${currentPage}`) //Here, I'm assuming I want 10 data in a single page. That’s why I used dataPerPage = 10
            setTotalPageAmount(res.data.totalPages);
            return res.data.paginatedData;
        }
    })

    //To avoid any error, we will use a conditional loading
    if (paginatedDataPending) {
        return <p>Loading…</p>
    }


    //Here, ‘totalPageAmount’ is a number. So, we have to turn it into an array, so that we can use the map function.
    const totalPages = [...Array(totalPageAmount).keys()];

Now in JSX, we will use a pagination bar, so that we can select our desired page.

        //Pagination element in JSX
        <div>
            {
                totalPages.map(page =>
                    <button key={page}
                        onClick={() => setCurrentPage(page + 1)}>
                        {page + 1}
                    </button>)
            }
        </div>

Feeling a bit lost? No worries, it's because we haven't dealt with the back-end stuff yet. So, let's clear up the confusion and switch our focus to the back-end. We're about to simplify things and make it all less puzzling. Ready to check out what's happening behind the scenes? Let's get started!

Back-end (Node.js, Express.js, and MongoDB)

Here is where the magic happens. To craft our API, we'll be utilizing Express.js, as mentioned earlier. So, let's delve into the details and witness the behind-the-scenes work unfold.

//Get paginated result
app.get("/paginatedDataApi", async (req, res) => {

    //Get query result
    const dataPerPage = parseInt(req.query.dataPerPage);
    const currentPage = parseInt(req.query.currentPage);

    //Get data from database
    const totalData = await databaseCollectionName.find().toArray();

    //Pagination calculation
    const totalPages = Math.ceil(totalData.length / dataPerPage) //calculating total pages
    const startIndex = (currentPage - 1) * listingPerPage;
    const endIndex = currentPage * listingPerPage;
    const paginatedData = totalData.slice(startIndex, endIndex); //getting the paginated result only to send to the front-end

    //Send the result to front-end
    res.send({ totalPages, paginatedData });
})

Voila! Our pagination system is up and running smoothly. Easy peasy, wasn't it? We've got this!

Conclusion

In a nutshell, adding this sturdy pagination system makes MERN apps way better for users. It helps handle a bunch of data more smoothly and shows it in a way that's easier for everyone to use. Cool, right?

Follow me on: Github LinkedIn

DEV Community: Nahidul Islam

Understanding useRef in React (Without the Confusion)

What useRef Actually Is

Why useRef Exists at All

The Most Common Use: Accessing the DOM

Keeping Values Between Renders (Without Re-rendering)

Tracking the Previous Value

Storing External Objects

What useRef Is Not

A Simple Mental Model

Final Thoughts

Understanding Generics in TypeScript: The Ultimate Guide to Reusable Code

🚀 What Are Generics in TypeScript?

🎯 Why Should You Learn Generics?

🏆 Understanding Generics with a Simple Example

🏗️ Applying Generics in Classes

🔗 Generics in Interfaces for Flexible Object Type

🔥 Adding Constraints to Generic

🚀 Benefits of Generics in TypeScript

🎯 Final Challenge: Try Generics Yourself

Understanding MongoDB's distinct() Operation: A Practical Guide

What is distinct()?

Why Use distinct()?

When to Use distinct()?

How to Use distinct()

Real-Life Example: E-commerce Product Catalog

Example 1: List All Unique Product Categories

Example 2: Find Unique Brands in a Specific Category

Example 3: Price Points for Premium Products

Best Practices and Considerations

Explore my portfolio

TypeScript Generics: Building Flexible and Reusable Components

What are Generics?

Why should we use Generics?

Basic Syntax

Practical Examples

Generic Functions

Generic Interfaces

Generic Classes

Advanced Generic Techniques

Constraints

Generic Type Aliases

Conclusion

Explore my portfolio

Access Modifiers in TypeScript: The Gatekeepers

1. Public

2. Private

3. Protected

Combining Access Modifiers with Constructors

Why Use Access Modifiers?

Access Modifiers at a Glance

Conclusion

Explore my portfolio

Exploring Basic Data Types in TypeScript

1. String

2. Number

3. Array

4. Object

5. Null & Undefined

6. Function

7. Never

8. Type Alias

9. Type Alias in Function

Conclusion

Explore my portfolio

Exploring the Power of Union and Intersection Types in TypeScript

Understanding Union Types

Unveiling Intersection Types

Embracing the Benefits

Explore my portfolio

Reusable Code: React Custom Hooks Guide

Unveiling the Essence of Hooks

When should we consider custom hooks?

Crafting the first custom hook

Conclusion

How to Implement Pagination in MERN-Stack Applications

Front-end (React.js)

Back-end (Node.js, Express.js, and MongoDB)

Conclusion

What `useRef` Actually Is

Why `useRef` Exists at All