DEV Community: Konfy

Do we still need DTO ?

Konfy — Thu, 05 Feb 2026 19:21:15 +0000

I recently had the pleasure of talking about DTOs with a fellow engineer. During our discussion, I destructured the API response directly from the backend in my frontend code. I immediately noticed the disappointed look on their face. That got me thinking: why do we even need DTOs in the first place?

What is a DTO?

A DTO (Data Transfer Object) is a structured object used to transfer data between layers or systems. It often exists to:

Validate data coming from the backend.

Transform backend responses to match frontend needs.

Decouple frontend and backend schemas to avoid breaking changes.

In traditional REST APIs, DTOs are common because responses may include extra fields, nested structures, or data that the frontend doesn’t need.

How GraphQL Changes the Game

GraphQL allows the client to request exactly the data it needs. This has several implications:

Fine-grained queries
You define the shape of the data on the client-side query. This reduces the need for mapping large responses to a DTO.

Strong typing
GraphQL schemas are strongly typed. Tools like Apollo Codegen or GraphQL Code Generator can automatically generate TypeScript types for your queries and mutations.

Flexible frontend evolution
If the backend adds extra fields, your client won’t be affected unless you query them. DTOs no longer serve as a shield against breaking changes.

When You Might Still Want DTOs

Despite GraphQL’s strengths, there are cases where DTOs in the frontend can be useful:

Business logic transformation
You might want to compute new fields, format dates, or merge multiple queries into one object suitable for the UI.

Validation or sanitization
If the backend can send optional or nullable fields, a DTO can enforce stricter rules before the UI consumes the data.

Decoupling for long-lived projects
In large teams, a DTO can isolate frontend code from backend schema changes, especially if the backend is shared across multiple clients.

When You Probably Don’t need DTOs

Small apps or MVPs
The overhead of mapping to DTOs usually outweighs the benefits.

Type-safe GraphQL clients
If you’re using TypeScript with generated types, your types already act as a “live DTO.”

Direct UI consumption
If your components can directly consume the GraphQL response, adding DTOs adds boilerplate without much gain.

Sidenote: Some still prefer to have it part of clean architecture. What's your perspective ?

Avoid react re-renders: Warning: Copy pasted from chatGPT

Konfy — Wed, 14 Jan 2026 23:41:07 +0000

Use controlled state at the right level

Keep state local when only one component needs it

Lift state only when necessary

// Bad: global store for a single toggle
const showModal = useGlobalStore(state => state.showModal);

// Good: local state
const [showModal, setShowModal] = useState(false);

Memoize components and values a. React.memo for functional components

Prevents re-render if props haven’t changed:

const ListItem = React.memo(({ item }) =>

{item.name}

);

b. useMemo for expensive calculations
const filtered = useMemo(() => items.filter(i => i.active), [items]);

c. useCallback for stable callbacks
const handleClick = useCallback(() => doSomething(id), [id]);

Use selectors in state management

Libraries like Redux / Zustand can trigger re-renders only for selected slices

const userName = useStore(state => state.user.name);

Avoid reading the entire state object → prevents unnecessary re-renders

Split large components

Break into smaller components so only the relevant part re-renders

→ +

Avoid inline objects/arrays in props

Inline objects/arrays are new references every render

// ❌
// ✅

Use key properly in lists

React uses key to determine if elements changed

Stable keys prevent unnecessary re-mounts

{users.map(u => )}

Avoid context overuse

Context updates re-render all consumers

Use state libraries (Zustand, Jotai) for frequently changing state

Optimize re-renders from parent → child

Pass primitive props or memoized references

Avoid passing functions/objects inline unless memoized

Use React Profiler for bottlenecks

Identify unnecessary re-renders

Optimize only hotspots

Measure actual impact before premature optimization

Server-side considerations

For Next.js / SSR:

Use server components for static content

Only client components for interactive state

How lambda manages dependancies

Konfy — Sun, 11 Jan 2026 20:43:58 +0000

When moving from EC2 to Lambda, one of the common trait in having node_modules all in a same lambda. Well, this practise has been long gone with the advent of Layers.
Layers lets you to install dependancies separately in a common pool and use it across different lambdas.

For example, I have 2 lambdas.

Lambda 1 - Reads a csv and saves it to DB
Lambda 2 - Reads a csv and sends email

Now, both has a dependancy package to read the .csv file. Let's say exceljs. If you need to install them in both the lambdas, don't you think you will do same for future lambdas also and its a wastage to do it everytime.

Instead, create a layer with your dependancies. Version them out and just update the layers.

Check out more about layers over here - https://docs.aws.amazon.com/lambda/latest/dg/chapter-layers.html

Do you need state management still ?

Konfy — Sun, 04 Jan 2026 11:55:42 +0000

When I started working on my hausapp one question tickles my interest. I used to have a state management in place as a statement just in case if I need anything to be driven far from what I was expecting out of it.

My app is simple

Like many developers, I initially added state management “just in case” my app grew beyond expectations. But as I built more, I started questioning that decision.

My app is simple:

Select your block
Upload a picture
Make sure maintenance is paid on time

I do plan to extend it later, but for now, the scope is limited. That’s where the dilemma begins.

Dilemma

We have global and local state management. A good developer keeps state close to the component housing. This is what I have learnt so far but sometime you need global state for this too.

For example:

When a user visits again, I want to remember their selected block.

When they navigate to other services (help, previous maintenance records), I need access to shared user data like haus number or name.

At this point, traditional solutions come to mind:

Redux
Jotai
Zustand

And yes, they would work.

I can do this via a state management, jotai might help or rather redux is there with me

But, lets pause for a second. Its a small component which makes calls and retrieves the data from the backend and displays it. Do you agree ?

For this, I don't need lots of boilerplate or no state management at all right ?

Hello tanstack

Enter TanStack Query

This is where TanStack Query clicked for me.

Most of what I was trying to “manage” was actually server state:

Fetching user data
Caching responses
Keeping data fresh
Avoiding unnecessary refetches

TanStack Query already solves all of this:

Built-in caching
Stale-while-revalidate
Automatic background refetching

And for the remaining lightweight client state,
TanStack Store is more than enough for my use case—without the mental overhead of a full state management library.

So, its a win-win for me using it and move on with my backend prisma schemas.

Just my thoughts shared over here. what do you think?

Let's (try to *) understand AI first.

Konfy — Sat, 04 Oct 2025 09:36:34 +0000

My experience with LLMs

Working with large language models (LLMs) has been fascinating. But to use them smoothly, it helps to understand some common traits. I am sharing some of what I have learnt here.

1. Training data influence ("bias")

Have you heard of AI hallucinations? They, along with conversation bias, often come from the same root cause: training data. Because models reflect patterns from the data they were trained on, they can inherit human biases or habits. This shows up a lot in coding.

As the joke goes: “I started discussing a problem with an LLM, and now I have two problems.”

Example:
You: Check this test case and see why it’s not passing. Also follow security advice.
AI: After several tries, let me just comment out the test case and run it.

Why? Because in real-world data, developers often comment out code while debugging. The model mirrors that pattern.

2. Mirroring / Parroting

LLMs also tend to echo your tone and phrasing. It’s their way of keeping the conversation natural and aligned with you.

For example, if you greet the model with “Howdy partner!” a few times, it may start greeting you the same way — even if it doesn’t “understand” cowboy culture.

In short: AI echoing human terms = the AI parroting human linguistic habits, sometimes without deeper reasoning.

—
Recognizing these patterns helps you set better expectations and work with LLMs more effectively.

Figma MCP to Code with cursor

Konfy — Sat, 04 Oct 2025 09:11:31 +0000

Recently, I got the opportunity to explore Figma MCP to design. Here is beautiful post from Amish which explains how to connect. I will discuss common pitfalls and how to prompt for better design to code

1. Make sure that you are selecting the "Frame"

If you haven't selected the frame, your model finds it hard to know which one you are talking about

2. Granularize your prompt

Don't give it "Built me a whole UI from the selected frame" prompt. Better talk to it like talking to a colleague. Let's build a button first. check the colors. is it matching ? now, lets build animation for it. This works better in my opinion

3. Always make sure the screenshot from model matches the design.

Most of the time it misses out the details in the design. It can create decent outlook but don't be perfectionist in beginning itself

Note: It's not a magic bullet but an accelarator to ease off your design creation journey. *Try to adapt it not force it. *

Remember, its not a slave but a companion.

Happy exploring.

React v19: New Features Breathe Life into My Favorite Pokemon App!

Konfy — Fri, 03 Jan 2025 09:42:43 +0000

React 19, released on December 5th, 2024, has arrived! I couldn't wait to see what exciting features it offered, so I dusted off my favorite Pokemon app and started tinkering. Here's what I discovered:

1. Effortless Loading States with useTransition

Gone are the days of manually managing a separate loading state! React 19 introduces the useTransition hook, which streamlines handling temporary UI states during data fetching. With useTransition, you can show a placeholder UI while data loads in the background, automatically transitioning to the actual content once it's ready. This image showcases the power of useTransition

I don't need to keep on track for loading anymore. setting a Loading state will be taken care by startTransition

Pretty cool right..

2. Rendering Revamp: createRoot Replaces ReactDOM.render

While not a React v19 change, it's worth noting that React v18 introduced createRoot as a replacement for ReactDOM.render for rendering React apps. This provides a more modern and efficient way to handle app rendering. Here's a comparison of the old (ReactDOM.render) and new (createRoot) approaches (image link for v17 ReactDOM.render, image link for v18/v19 createRoot).

Before:

After:

Even More to Explore!
These are just a few of the exciting features in React v19. Upgrading to v18 first might be a smoother transition path, depending on your current codebase. The official React documentation is a great resource for diving deeper into useTransition, createRoot, and other new functionalities.

I'm thrilled to be exploring these new features and breathing new life into my Pokemon app!

Hitting CORS during oAuth? Do check how to setup reverse proxy in react

Konfy — Mon, 30 Sep 2024 20:33:02 +0000

While implementing oAuth for third-party integration, I stumbled upon some informations which weren't updated for quite a while. Here I am trying to capture my experience and how it works

Note: This article won't talk in detail about oAuth and how it works. Mostly focus on how to configure and implement them in react application. If you want to read about oAuth, read here. Provides crystal clear information.

The Flow:

Roughly the flow works like described above.

So, what's the problem:

Usually when you try to get the code & code_verifier from third party website directly, you may encounter CORS issue. This is expected.

How to resolve them ?

Check with third party provider - If they can whitelist your website, amazing. You don't need a backend at all
If whitelisting doesn't work, you may need a backend to work as reverse_proxy for you. In our case, we used a simple typescript setup which proxies our call and used it as backend for reverse proxy. You can achieve it with your backend setup too.

Why it's hitting CORS?

Cause most likely, if you use PKCE, you have to send Authentication header along with your request, to get the token. Sending Authentication is a no-no from UI for security reasons.

CORs is a feature built into browsers for added security. It prevents any random website from using your authenticated cookies to send an API request to your bank's website and do stuff like secretly withdraw money.

Which library did I use to get it done easily in react?

https://github.com/authts/react-oidc-context
👆 this one. This provides configuration as context and also supports webstoragestatestore which is nice to have.

Do you have more questions?

Reply here. Gladly would love to help if I can :)

Happy coding..

Interesting behavior of window.location.href

Konfy — Tue, 06 Feb 2024 09:00:18 +0000

We recently had a small hiccup in downloading multiple files from a portal. We got blocked by browser saying its a popup or request client to allow multiple file download.

What are we trying to do ?

We have to download 3 files once client clicks on "Download all files" button. We don't want client to allow pop-up or allow multiple downloads

What are the options

Use a library to download like filesync or saver

We don't like to use a library just to resolve this problem

Use window.open

But this will be blocked by browser as pop-up.

Use window.location.href

Well, if you use this, you can get it . Yet, if you trigger multiple urls with it, it will "override" the previous URL.

So, how to solve it

Use windown.location.href with settimeout

To read more about it, you can see this amazing article from Ryo Mac

https://medium.com/psynamic/demystifying-the-event-loop-featuring-settimeout-f702d4020d9a

This sets a delay in execution and helps with override of url.

bun.js - Faster alternative for yarn

Konfy — Thu, 14 Sep 2023 07:16:44 +0000

tldr; bun is faster than yarn (Personally...) and it helps reduce loads of time by installing faster. I am still trying to do gitlab ci install now

I have been working on evolutions. From nodejs, v8 engine to yarn, pnpm and new kid in town "bun.js"

bun proves to steal the limelight and not just any limelight. When developers hate yarn everytime for slow installation,(again in ci personally..) bun does it in ease.

Time taken for yarn install: 1 minute and 39 seconds
Time taken for bun install : 5 seconds

To counter argue, yarn v3 is improving the experience and what about pnpm. I get it. When you think of installing once and using it as runtime, test runner, bundler and total toolkit, well, I got convinced.

Onwards and upwards raising with bun :) Delicacy delivered

Why we may use relative path instead of fullpath in nextjs

Konfy — Mon, 17 Jul 2023 07:17:10 +0000

Scenario : I have 2 levels of pages
page 1 which has page1.1 and page 1.2

Now, when these got blown to several pages you may end up with several pages and several sub pages. But, what happens to assets
will you change them to ../../assets for pages which are in deep levels and so forth

It can be resolved easily with something called reference path. what is reference path

A path with prepend slash will result in referencing of assets folder which is relative to root directory

Example instead of "../../assets/imgs" (fullPath) you can use "/assets/imgs" (relativePath) . Ofcourse, nextjs built this as in favor of root directory which will resolve in the beginning

So, always remember to use relative path so that it will resolve itself instead of fullPath

You can do a good read in fileSystementry about it

https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry/fullPath

What is trailingslash in next.js

Konfy — Tue, 04 Jul 2023 15:39:04 +0000

Usually, when you are doing static site generation out of nextjs, the route will be handled via nextjs (Thanks to Next Link). But, when you are trying to point a small division to link inside this might not work.

What's the issue:
Let's say you have a url, www.xyz.com/about. This will automatically handled by nextjs to be www.xyz.com/about/ . Can you see the difference ? yes. the "/" after "about" (/about/). This is what we call as "trailing slash"

What nextjs do here?
It automatically redirects things with trailing slashes to their counterpart (www.xyz.com/about) will be redirected to ( www.xyz.com/about/)

pages inside nextjs expects to render components with trailing slashes which might cause an issue here

How to solve it?
By adding trailingslash: true in next.config.ts

Want to read more about it ?
Here is the link - [(https://nextjs.org/docs/app/api-reference/next-config-js/trailingSlash)]