DEV Community: Hossain MD Athar

Stop Using “?” Everywhere! Use `Omit` ( i.e. Utility Types) for Safer TypeScript

Hossain MD Athar — Sat, 29 Nov 2025 05:21:39 +0000

TypeScript was created for one purpose: to bring safety and clarity to JavaScript. When Microsoft first released it, their mission was simple - give developers predictable types, reduce runtime bugs, and make debugging easier.

But even with all the guardrails TypeScript provides, there’s one tiny operator that many developers misuse without realizing the long-term cost:

? — the optional modifier.

It looks harmless. It’s convenient. But using it in the wrong places quietly destroys the type safety TypeScript was built for.

Let’s talk about why — with real-world examples, better patterns, and official TS-backed solutions.

Where Things Start to Go Wrong

Imagine a simple model:

type User = {
  id: string;
  name: string;
  email: string;
};

A User always has an ID.
This is part of your domain logic. The backend guarantees it.

But when you’re building a form to create a user, you don’t have an id yet. And this is where many developers introduce a subtle bug:

id?: string;

Looks tiny, but this changes everything. Because now, TypeScript thinks:

A user might have an ID
Or might not
Anywhere in the entire codebase

Your core type becomes weaker, and the compiler loses its ability to actually protect you.

Real Life Example: When TS Yells at You

Let me show you how this problem shows up at work. I had code like this:

const customerId = client.customerId;
const updatedData = await updateCustomerById({ id: customerId, body: data }).unwrap();

Nothing looks wrong…
But TypeScript hits you with this:

'client' is possibly 'undefined'.ts(*****)

Why?
Because somewhere in the type definitions, someone got lazy and wrote:

type Client = {
  customerId?: number;
  ... 
};

That one little ? forces TypeScript to assume:

client.customerId might be undefined
and you must guard every line of code

So you end up writing completely unnecessary defensive code:

if (!client?.id) throw new Error("Client id missing!");
// or maybe, you add condition in submit function

The real problem is the type design, not the logic.

The Fix the TypeScript Docs Recommend

TypeScript’s official documentation gives us tools for this exact situation.

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally. [TS docs]

The solution is not to make everything optional.

The solution is to derive specific types for specific contexts using utility types.

Use `Omit` — Not `?`

If a User always has an ID, but your form doesn’t, you create a separate type:

type CreateUserInput = Omit<User, "id">;

Done.
Clean.
Safe.
Predictable.

Your domain stays strict:

type User = {
  id: number;
  name: string;
  email: string;
};

This is exactly what TypeScript recommends in its documentation on building new types from existing ones.

Final Thoughts

The next time you feel the urge to sprinkle ? everywhere to make TS stop complaining, pause a moment and ask:

“Am I modeling reality… or am I just silencing TypeScript?”

Use Omit, Pick, and TypeScript’s built-in utilities. Your future self — and TypeScript — will thank you. Explore more and comment below how utility types saved you!

RTK Query vs Custom Axios Hooks: What Actually Happens When Your Project Grows

Hossain MD Athar — Sun, 23 Nov 2025 11:51:05 +0000

I started a React project with the usual “simple” setup: Axios, a custom data-fetching hook, and a clean little useEffect here and there. Early on, it felt totally manageable. One hook per endpoint, a bit of state for loading, and everything stayed readable.

But once the app grew, the weaknesses of that setup showed up fast. Different parts of the app needed the same data, hooks started duplicating logic, and suddenly every new feature required more boilerplate. I kept feeling like I was rebuilding the same patterns across the codebase.

That’s when I committed to RTK Query—and the difference was immediate.

The RTK Query Version (clean, obvious, predictable)

Fetching data with RTK Query feels almost peaceful. The intent of the component is clear at a glance:

const dispatch = useDispatch();

// RTK Query: fetch ticket data with automatic caching, loading state, and refetch logic
const { data: ticket, isLoading } = useGetTicketsByCompanyIdQuery(
  company?.id ?? 0,
  { skip: !company?.id }
);

That’s the entire fetching setup. No manual state, no useEffect, no memoization, no “did this refetch correctly?” debugging.

Why it reads better

The component tells you what data it needs, not how to get it.

Why it scales better

Data is cached and shared automatically across components. Duplicate requests disappear. Adding new endpoints keeps code centralized (API slice), not scattered across hooks.

Why it’s more efficient

Built-in caching prevents redundant network calls. Invalidations and refetching are handled by a unified system, not random effects.

The Axios Hook Version (works… until it doesn’t)

Here’s the hook-based version:

const dispatch = useDispatch();

// Custom hook using Axios
const { fetchData } = useGetData<TicketDetails[]>();

useEffect(() => {
  const fetchTickets = async () => {
    const apiRoute = `/api/tickets/company/${company?.id}`;
    const response = await fetchData(apiRoute);
    response && setTickets(response); // assuming local useState
  };

  fetchTickets();
}, [company, fetchData]);

Nothing wrong with it… but look at all the moving parts:

Manual loading state
Manual caching (if you want it)
Manual dependency management
Manual refetch rules
Manual error handling
Local state everywhere

This grows messy quickly because each component is responsible for its own data lifecycle.

Readability issues

Your UI logic gets mixed with loading logic, effect logic, error handling, and state updates. Two months later, you forget why something re-fetches—or why it doesn’t.

Scalability issues

As soon as multiple components need the same API data, you either: duplicate calls, or build your own caching layer (which… is basically reinventing RTK Query).

Efficiency issues

Every mount triggers a fetch unless you build custom memoization/caching. Not wrong—just extra work.

RTK Query gives you:

shared data
request deduping
caching
invalidation
polling
refetch-on-focus
consistent patterns

Without you maintaining any of it.

Final Thoughts

If your project is tiny, Axios hooks are fine. But once your state logic starts spreading out—multiple components relying on shared data, multiple endpoints, or complex flows—RTK Query shines.

You get:

cleaner components
clearer intent
centralized logic
fewer bugs
fewer network calls

If you’re feeling your data-fetching logic getting harder to wrangle, that’s usually the moment RTK Query becomes worth it. It made my project much easier to maintain as it grew.

Answer: React-PDF Slow Performance with large PDF, reneders unneccessarily.

Hossain MD Athar — Wed, 19 Nov 2025 06:35:56 +0000

If, in 2025, anyone is facing the same issue with react-pdf causing excessive bundle size or initial page load lag, you can try the following approach. Instead of using React.lazy() (which is for JSX components), I'm using standard dynamic imports for the required functions and components. This ensures they are imported and processed only when the PDF button is clicked, not on every page render. This solves the performance and bundle size issues.

const handleGeneratePdf = async () => {
    if (!ticket || !company) return;

    try {
      const { pdf } = await import("@react-pdf/renderer");
      const { default: CertiPdf } = await import("../CertPdf");

      // Generate PDF blob
      const blob = await pdf(<CertPdf company={company} ticket={ticket} />).toBlob();

      // Create URL for viewing/printing
      const url = URL.createObjectURL(blob);
      setPdfUrl(url);
    } catch (error) {
      console.error("Error generating PDF:", error);
    } 
  };

Answer: Cannot read properties of undefined (reading 'invalidatesTags') [duplicate]

Hossain MD Athar — Sun, 26 May 2024 09:36:18 +0000

Jan 29 '24

I solved my problem by following their docs!

This link will take you exactly where they (RTK docs) talk about it

The reducerPath is a unique key that your service will be mounted to in your store. If you call createApi more than once in your application, you will need…

Open Full Answer

Answer: How I can count how many times my component rendered in a react component

Hossain MD Athar — Sun, 26 May 2024 09:08:59 +0000

May 26 '24

If you are working on a big project, create a custom hook. In this way, u can tackle unnecessary renders.

Creating Custom Hook for renderCount.

import { useRef, useEffect } from "react"
export default () => {
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current++;
  });
  return renderCount.current;
};

then…

Open Full Answer

How to Persist User Info Using Redux Persist with TypeScript

Hossain MD Athar — Mon, 13 May 2024 09:39:03 +0000

As I was doing my React project, I was trying to persist user data using redux. And, here I am now to share with you how I solved my problem. Are we on the same page? Let's dive in!

Redux Persist is a library that enables seamless persisting and rehydrating of your Redux store state. By persisting your state, you ensure that user data remains intact even if the application is refreshed or closed temporarily. Installing Redux Persist is the first step towards achieving this persistence.

PS: Are you getting an error "A non-serializable value was detected in the state" using Redux-persist? Let's take of it as well.

Step 1: Install Redux Persist Package

First things first, let's get Redux Persist up and running in your project. Install the package using npm or yarn:

npm install redux-persist

Step 2: Setup Persist Config

In this step, you define a persist configuration object e.g. authPersistConfig. This object specifies how Redux Persist should handle the persistence of your Redux state. The key property uniquely identifies the slice of state you want to persist (in our case, "auth"). The storage property determines where the state will be stored (e.g., local storage). Additionally, you can specify any properties to blacklist from being persisted (e.g., "somethingTemporary"). Refer back to their official docs for additional features.

import storage from 'redux-persist/lib/storage';
import { persistReducer } from 'redux-persist';
import { authReducer } from './reducers/authReducer';

const authPersistConfig = {
  key: "auth",
  storage,
  blacklist: ["somethingTemporary"],
};

const persistedReducer = persistReducer(authPersistConfig, authReducer);

Step 3: Configure Store Setup

Once you have your persist configuration set up, it's time to integrate it into your Redux store. You create a persisted reducer by passing your persist configuration and your reducer function to persistReducer. Then, you configure your Redux store using configureStore from Redux Toolkit, ensuring that the persisted reducer is included in the store configuration.

import { configureStore } from '@reduxjs/toolkit';

export const Store = configureStore({
  reducer: {
    auth: persistedReducer,
  },
});

Step 4: Debugging Error of Serialization

We are there almost! Now we have an error.

"A non-serializable value was detected in the state"

Serialization errors can occur when trying to persist certain types of data that cannot be serialized properly (e.g., functions or circular references). Redux Persist provides a built-in solution for handling serialization errors, but in this guide, we opt for a simpler approach using Redux Toolkit Serializability Middleware. We configure the middleware to ignore specific actions that Redux Persist dispatches internally to serialize and deserialize state (FLUSH, REHYDRATE, etc.).

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
import { persistReducer, persistStore } from 'redux-persist';

export const Store = configureStore({
  reducer: {
    auth: persistedReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

Step 5: Export Persistor

After configuring Redux store with Redux Persist, export a persistor object using persistStore. This persistor object is responsible for managing the persistence and rehydration of your Redux store state. It's typically used in conjunction with the PersistGate component in your application's entry point.

import { persistStore } from 'redux-persist';

export const persistor = persistStore(Store);

Step 6: Integrate with React

Finally, integrate Redux Persist with React by wrapping the application with the PersistGate component. The PersistGate ensures that your application waits for the persisted state to be loaded before rendering. This prevents any rendering inconsistencies that may occur while the state is being rehydrated.

import { PersistGate } from 'redux-persist/integration/react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

Congratulations! You've successfully persisted user info using Redux Persist with TypeScript. Now sit back, relax, and enjoy the seamless user experience.

How to use React `forwardRef` with TypeScript!

Hossain MD Athar — Fri, 10 May 2024 10:55:43 +0000

React's forwardRef is a powerful feature that allows you to pass a ref through a component to one of its children. This is particularly useful when you are working with reusable components or when you need to manipulate a DOM element in React. Today, we'll explore how to implement forwardRef in React using TypeScript, focusing on a simple example of a text input component.

What is `forwardRef`?

Before we dive into the implementation, let's briefly explain what forwardRef does. When you use forwardRef, you can forward a ref to a child component. This means that you can access the underlying DOM node or React component instance of the child component from its parent. This is especially handy when you need to interact with a child component imperatively.

"forwardRef lets your component expose a DOM node to parent component with a ref." - react official docs

Remember, in react we do not manipulate DOM directly. But there might be some cases where we need to manipulate DOM e.g. working with react hook forms Controller component. In that case, we use ref but to work with the child component we implement forwardRef.

PS: Every JSX/TSX we write becomes a valid JS object behind the scenes.

There are many ambiguous uses of forwardRefI found on the internet while I got errors in my project. Then I found a simple solution which I will share with you in step by step process.

Step-by-Step Implementation

Let's walk through the process of implementing a text input component for React hook form with forwardRef in React using TypeScript.

1. Define Props Interface

First, define an interface for the props that the TextInput component will accept. In our example, we'll create an interface called FieldDataProps with label, value, and onChange properties.

interface FieldDataProps {
  value?: string;
  label: string; // input field label
  onChange: (value: string) => void;
}

2. Create the `TextInput` Component

Next, create the text input component using the ForwardRefRenderFunction type from React. This type represents a function component that accepts props and a ref. Inside the component, handle the onChange event of the input element and invoke the provided onChange function with the new value.

import React, { ChangeEvent, ForwardRefRenderFunction } from "react";

const TextInput: ForwardRefRenderFunction<HTMLInputElement, FieldDataProps> = (
  { label, onChange, value },
  ref
) => {
  const handleTextInput = (event: ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;
    onChange(newValue);
  };

  return (
    <div className="provide-your-classes"> // using tailwindcss
      <input
        type="text"
        ref={ref}
        value={value}
        onChange={handleTextInput}
        placeholder={" "}
      />
      <label>{label}</label> // label is given dynamically
    </div>
  );
};

3. Forward the Ref

Now, use React.forwardRef to forward the ref to the text input component. Quite simple as it is, just put the whole TSX/JSX function inside React.forwardRef() and export. This allows parent components to access the input element's DOM node or React component instance.

const ForwardedTextInput = React.forwardRef(TextInput);
export default ForwardedTextInput;

4. Usage

You can now use the TextInput component in your application. Pass the necessary props and a ref, and you're good to go!

// Impleting in react hook form
import TextInput from "./ForwardedTextInput";

// put necessary code here
// following controller component is from React Hook Form
     <Controller
       name="your_input"
       control={control}
       rules={{ required: true }}
       render={({ field: { value, onChange, ref } }) => (
         <TextInput
           ref={ref}
           onChange={onChange}
           value={value}
           label="Your Input"
          />
        )}
      />

Conclusion

Congratulations to us, we've learned how to implement React's forwardRef feature with TypeScript by creating a simple text input component. By following these steps, you can create reusable components that accept refs and provide more flexibility in your React applications.

Got any questions? leave a comment below.

WebCraft with Hossain!

How Do You Declare Custom Classes in a Tailwindcss-React-ts project?

Hossain MD Athar — Sat, 03 Feb 2024 16:27:23 +0000

Hey fellow developers,

So, picture this: knee-deep in my project, I hit the classic developer's roadblock - the need for custom classes. Here's my journey, a tale of trials and triumphs that might just save you some precious coding time!

The Dilemma of Custom CSS in Tailwind

In the vast tapestry of React Tailwind projects, customizing styles can feel like a puzzle. I explored three paths, each with its quirks and perks. Let's dive in!

1. Wrangling Tailwind Classes in a Variable!

First up, I tried corralling those repetitive Tailwind classes into a variable tucked away in a cozy .ts file. Everything seemed peachy until the day I wanted a little flair, a touch of customization. Spoiler alert: couldn't pull it off. My dreams of a unique twist were dashed. It's like committing to a tattoo; changing your mind becomes a tad complicated.

2. Global Stylesheet Declaration

Moving on, I experimented with declaring a class in a global stylesheet. A good practice, you'd think. Worked like a charm, until I craved more control. Trying to finesse the styles proved trickier than juggling flaming torches. Need a smaller font? Tough luck! And let's not even start on the exclamation marks – felt like I was in a shouting match with my styles. Ugh!

3. The @layer Revelation in `index.css`!

And here comes the star of the show—the class declared as a component layer. This, my friends, is the holy grail. Why? Because it behaves like any default Tailwind CSS class, and you can customize it without breaking a sweat.

The Unmatched Prowess of Component Layer Classes

Why do I vouch for the third approach? Brace yourself for the pros:

Seamless Overrides: No more banging your head against the wall with !important. The component layer class gracefully accepts overrides like a seasoned actor playing multiple roles.
Scoped and Neat: Your styles remain scoped within the component, keeping your project neat and tidy. No more global chaos!
Dynamic Customization: Embrace dynamic styles effortlessly. This approach opens the door to a world where your styles adapt and evolve based on dynamic content.
Integrates Like a Charm: Remember, it's Tailwind CSS. Your custom class integrates seamlessly, like it was always meant to be there.

So, fellow coders, spill the beans! How do you deck out your project with custom CSS? Let's swap war stories and share the coding wisdom.

*Hint: Feel free to sprinkle in some more details if your secret sauce involves extra flair!

500 open-source components for TailwindCSS

Hossain MD Athar — Thu, 18 Jan 2024 09:03:55 +0000

I'd like to share my latest discovery with you.
TW Elements is currently, the most popular 3rd party UI kit for TailwindCSS with over 10k Github stars. It's a huge collection of stunning components made with attention to the smallest detail. Forms, cards, buttons, and hundreds of others. All components have dark mode and very intuitive theming options. The project is supported by an engaged community on GitHub, I recommend you check it out and join one of the many discussions.

You will find installation instructions here, and you can track the progress of the project live here.

The project was kickstarted by @MDBootstrap, a group of open-source developers behind MDB UI Kit - a high-quality UI kit for Bootstrap, and also behind MDB GO - hosting and deployment platform.

I highly recommend you to check it out!

Article No Longer Available

Unleashing TypeScript's Power: Exploring Key Concepts with Real-World Examples

Hossain MD Athar — Wed, 17 Jan 2024 06:37:59 +0000

In the dynamic world of web development, TypeScript emerges as a powerful companion to JavaScript. Let's explore some key concepts in a minute introduced by TypeScript, illustrating its features through practical examples. This blog will not div in detail!

But Why Typescript?

As they say,

"TypeScript is JavaScript with syntax for types".

TypeScript emerged to make developers' lives easy by explicitly declaring the types. It made debugging easier than before. For example,

let age: number = 25;

In this example, the variable age is explicitly declared as a number, providing clarity and aiding in error detection.

Type Annotations

TypeScript introduces type annotations, allowing developers to explicitly specify the type of variables, parameters, and return values. This enhances code documentation and facilitates better understanding. For example,

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Here, the function greet takes a string parameter and returns a string, clearly defining the expected types.

Interfaces for Clear Object Shapes

Interfaces in TypeScript define contracts for object shapes, ensuring that objects adhere to a specific structure. This enhances code readability and maintainability. For example,

interface Person {
  name: string;
  age: number;
}

const hossain45: Person = {
  name: "Hossain45",
  age: 23,
};

The Person interface specifies the structure of a person object, making it easy to create instances with consistent properties.

Type Aliases for Simplifying Types

Type aliases create descriptive names for types, making complex types more readable. They are particularly useful when dealing with unions, intersections, or custom types. For example,

type Age = number;
type RankAndName = `${string} ${string}`;

let userAge: Age = 23;
let rankAndName : RankAndName = "Develpoer hossain45";

Here, Age and RankAndName provide meaningful names for the number and template string types, respectively.

Union and Intersection Types

TypeScript supports union types, allowing variables to hold values of different types. Intersection types enable the combination of multiple types into one. For example,

type Admin = {
  role: 'admin';
};

type Employee = {
  role: 'employee';
};

type AdminEmployee = Admin | Employee;

The AdminEmployeetype can represent either an admin or an employee, providing flexibility in type definitions.

Generics for Reusable Code

Generics in TypeScript enable the creation of functions and data structures that work with various types, promoting code reuse and flexibility. For example,

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

let result: number = identity(42);

The identityfunction can accept and return values of any type, providing a versatile and reusable solution.

The Power (and Caution) of "Any"

While TypeScript promotes static typing, the anytype provides a way to opt out of type checking. It offers flexibility but comes with a loss of the benefits of static typing. For example,

let dynamicValue: any = 42;

In a broader perspective, consider a scenario where data arrives from an external API, and its structure is not fully known. The anytype allows flexibility in handling such dynamic data, but developers need to be cautious due to the lack of type checking.

Optional Properties for Enhanced Flexibility

TypeScript's optional properties provide an additional layer of flexibility by allowing properties to be present or absent in an object. For example,

interface User {
  name: string;
  age?: number;
}

const john: User = {
  name: "hossain45",
};

In a broader scenario, consider a user profile where an ageproperty is optional. This accommodates scenarios where not all users may have an age specified, offering enhanced adaptability in data structures.

That's all for today! WE WILL DIV INTO DEEPER ON EACH TOPIC LATER ON! HAPPY CODING!

Resolve “TailwindCSS Not Working in React-TypeScript Project with Vite” In Two Minutes!

Hossain MD Athar — Sun, 14 Jan 2024 12:24:15 +0000

Developers may face issues configuring Tailwind CSS in React projects built with TypeScript and Vite. These challenges can result in styles not being applied as expected, very FRUSTRATING!

Well, I was stuck too. Let’s explore a quick and effective way to start a React project with TypeScript and Tailwind CSS.

I tried many solutions online yet I could not find a suitable solution for my existing project.

To overcome these hurdles, follow these straightforward steps provided in the official Tailwind CSS documentation ( except for the first command) tailored for Vite React projects.

Step 1: Create a New File

Begin by creating a new file in your project. This file will serve as the entry point for Tailwind CSS configuration.

Step 2: Add react-ts to the Command

Refer to the official Tailwind CSS documentation for Vite and React projects. Make sure to navigate to the section specific to Vite. For TypeScript support, use the following command instead of the given command.

npm create vite@latest my-project --template react-ts // add -ts

This command initializes a new Vite project with the React-TS template, laying the foundation for a smooth integration with Tailwind CSS.

Step 3: Follow Remaining Documentation

Continue following the remaining steps outlined in the official Tailwind CSS documentation. These steps typically include installing dependencies, configuring your PostCSS and Tailwind CSS settings, and importing styles into your project.

Well, there you have it! Empower your React-TS development journey by implementing these solutions, and enjoy the seamless synergy between #React, #TypeScript, #Vite, and #TailwindCSS. Happy coding!

Share how you solved your problem in the comment below!!!