Forem: Arkajit Roy

🚀 Switching from Node + Express to Hono + Bun and I’m not looking back.

Arkajit Roy — Fri, 02 May 2025 03:57:18 +0000

Let’s talk real — Express had its moment. But the dev world? It's moving fast.
I recently jumped into building APIs using Hono (tiny, fast, edge-native framework) with Bun (next-gen JS runtime), and honestly... the experience is smooth, fast, type-safe, and just way more modern.

If you're still bootstrapping new APIs with Node + Express in 2025, here's why you might wanna reconsider 👇

💨 1. Performance: Express feels like 3G, Hono + Bun is basically 5G with fiber.

Express is stable, sure. But it’s built on top of Node.js — which is showing its age.
Hono, paired with Bun, delivers edge-native performance with crazy-fast cold starts and minimal overhead.

Here's an example of a basic route in both:

Express:

import express from "express";
const app = express();

app.get("/hello", (req, res) => {
  res.send("Hello from Express!");
});

app.listen(3000, () => console.log("Running on 3000"));

Hono (with Bun):

import { Hono } from "hono";

const app = new Hono();

app.get("/hello", (c) => c.text("Hello from Hono!"));

export default app;

Hono is simpler, lighter, and doesn’t even need an external server setup when deployed on Bun or Cloudflare Workers.

🧠 2. TypeScript-first, no hacks.

Hono gives you full type safety — route params, request bodies, responses, all typed out of the box.

Example: typed route with request body validation

import { Hono } from "hono";
import { z } from "zod";
import { zValidator } from "@hono/zod-validator";

const app = new Hono();

const schema = z.object({
  name: z.string(),
});

app.post(
  "/greet",
  zValidator("json", schema),
  (c) => {
    const { name } = c.req.valid("json");
    return c.json({ message: `Hello, ${name}` });
  }
);

Express doesn’t do this out of the box. You’ll need to install types, use custom middlewares, and fight with TS at every step.

📦 3. Everything you need, built-in.

No more:

npm i body-parser cors express-validator helmet morgan ...

Hono comes with:

Native async/await
Middleware support (with simple chaining)
Typed routing
Built-in utilities for validation, cookies, headers, etc.
Compatible with the Fetch API standard (super easy to work with)

It just… works.

🧪 4. Bun is more than a runtime — it’s a dev toolkit on steroids.

When you install Bun, you get:

✅ bun test — runs blazing fast (bye Jest)
✅ bun install — faster than npm/yarn/pnpm
✅ bun bun — built-in bundler
✅ bun transpile — TS/JS support without config hell

bun init
bun install hono
bun run src/index.ts

That’s your API up and running — no config, no fuss.

🌍 5. Edge-native by design.

Apps are going serverless and edge-first — Vercel, Cloudflare Workers, Deno Deploy, etc.
Hono was literally built for these environments.
Express? Still assumes a traditional Node server on a VM somewhere.

⚡ TL;DR

Express is that old reliable — but Hono + Bun is the modern way forward:
Fast, type-safe, minimal, edge-ready, and DX-focused.

If you're starting a new API project in 2025, this combo is lowkey the move.

🔥 Bonus: Open-source starter repo?

If this gets enough interest, I’ll publish a public boilerplate repo using Hono + Bun + TypeScript. Let me know in the comments or drop a 🧠 if you’d want that!

Thanks for reading!
Let’s build APIs the modern way 🚀

#javascript #bun #hono #typescript #nodejs #api #webdev #backend #edgecomputing #fullstack

React Context-API Pro | Build state management using useContext + useReducer | Typescript

Arkajit Roy — Sun, 16 Jun 2024 05:45:30 +0000

The Context API in React is a powerful feature that allows you to manage state globally across your application without the need to pass props down through multiple levels of your component tree. When combined with TypeScript, it becomes even more robust, providing type safety and better code maintainability. In this article, I'll walk you through setting up a Context API for authentication in a React app using modern conventions and TypeScript.

Project Structure

First, let's outline the project structure. We'll split our Context setup into four separate files:

context.tsx: This file will create and export the context.
provider.tsx: This file will provide the context to the component tree.
reducer.ts: This file will define the initial state and reducer function.
actions.ts: This file will contain action creators.
state.ts: This file will contain the initial state of the context
useAuthContext.ts: This file contain a custom hook which will help to call context

01. Creating the Context

We'll start by creating the context.tsx file. This file will initialize the context and provide a custom hook for easy access.

import { createContext } from "react";
import { AuthContextProps } from "../types";

export const AuthContext = createContext<AuthContextProps | undefined>(undefined);

02. Defining the Initial State of the Context

After that we will define the initial state for the context in the state.ts. This initial state will be use for storing all the datas.

import { AuthState } from "../types";

export const initialState: AuthState = {
  isAuthenticated: false,
  user: null,
  token: null,
};

03. Setting Up the Provider

Next, we'll set up the provider in the provider.tsx file. This component will use the useReducer hook to manage the state and pass it down via the context provider.

import React, { useReducer } from "react";
import { AuthProviderProps } from "../types";
import { AuthContext } from "./context";
import { AuthReducer } from "./reducer";
import { initialState } from "./state";

export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
  const [state, dispatch] = useReducer(AuthReducer, initialState);

  return <AuthContext.Provider value={{ state, dispatch }}>{children}</AuthContext.Provider>;
};

04. Defining the Reducer

The reducer is the heart of our state management. In the reducer.ts file, we'll define our initial state and the reducer function to handle actions.

import { AuthAction, AuthState } from "../types";

export const AuthReducer = (state: AuthState, action: AuthAction): AuthState => {
  switch (action.type) {
    case "LOGIN":
      return {
        ...state,
        isAuthenticated: true,
        user: action.payload.user,
        token: action.payload.token,
      };
    case "LOGOUT":
      return {
        ...state,
        isAuthenticated: false,
        user: null,
        token: null,
      };
    default:
      return state;
  }
};

05. Creating Actions

Action creators make it easier to dispatch actions in a type-safe way. We'll define these in the actions.ts file.

import { AuthAction, IUser } from "../types";

export const login = (user: IUser, token: string): AuthAction => {
  return {
    type: "LOGIN",
    payload: { user, token },
  };
};

export const logout = (): AuthAction => {
  return { type: "LOGOUT" };
};

06. Configure the custom-hook.

This custom will help use set and call the context in any components without involving multiple parameters into it. Create a file and name it useAuthContext.ts.

import { useContext } from "react";
import { AuthContext } from "./context";

export const useAuthContext = () => {
  const context = useContext(AuthContext);
  if (!context) throw new Error("Error: useAuth must be within in AuthProvider");
  return context;
};

We are set with all the initial configuration for the state management; now we will see how we can utilize this in our application.

Using the Context

To utilize our new AuthContext, we need to wrap our application (or part of it) in the AuthProvider. We'll do this in our main entry point, typically App.tsx.

import React from "react";
import { AuthProvider } from "./context/provider";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";

const App: React.FC = () => {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
};

export default App;

Within any component, we can now use the useAuth hook to access the auth state and dispatch actions. Here's an example component that uses our AuthContext:


import React from "react";
import { useAuthContext } from "./context/useAuthContext";
import { IUser } from "./types";
import { login, logout } from "./context/actions";

const Home: React.FC = () => {
  const { state, dispatch } = useAuthContext();

  const handleLoginClick = () => {
    const user: IUser = { firstName: "John", lastName: "Doe", role: "SUPER-ADMIN" };
    const token = "dfs56ds56f5.65sdf564dsf.645sdfsd4f56";
    dispatch(login(user, token));
  };

  const handleLogoutClick = () => dispatch(logout());

  return (
    <div>
      <h1>Home Page</h1>
      {state.isAuthenticated ? (
        <div>
          <h3>Welcome {state.user?.firstName}</h3>
          <button onClick={handleLogoutClick}>Logout</button>
        </div>
      ) : (
        <button onClick={handleLoginClick}>Login</button>
      )}
    </div>
  );
};

export default Home;

Types & Interfaces

import { Dispatch, ReactNode } from "react";

export interface IUser {
  firstName: string;
  lastName: string;
  role: "SUPER-ADMIN" | "ADMIN" | "USER";
}

export interface AuthState {
  isAuthenticated: boolean;
  user: null | IUser;
  token: null | string;
}

export interface AuthContextProps {
  state: AuthState;
  dispatch: Dispatch<AuthAction>;
}

export interface AuthProviderProps {
  children: ReactNode;
}

export type AuthAction =
  | { type: "LOGIN"; payload: { user: IUser; token: string } }
  | { type: "LOGOUT" };

Conclusion

By following this structured approach, you can manage global state in your React applications more effectively. The Context API, when used with TypeScript, provides a powerful and type-safe solution for state management. This setup is not only limited to authentication but can be adapted for other use cases like theme management, language settings, and more.

With this knowledge, you can now use Context-API like a pro! Feel free to modify and extend this setup to fit the needs of your own projects.

Master React Optimization Technique

Arkajit Roy — Sat, 18 May 2024 05:35:24 +0000

In today's fast-paced web landscape, a React application's performance is paramount. A sluggish app can lead to frustrated users and lost conversions. Fortunately, React provides a plethora of built-in features and libraries to streamline your application and deliver a seamless experience. Here are 7 optimization techniques that will elevate your React app to production-grade quality

01. Component Memoization

To achieve memoization we can employee React.memo which is a higher-order component (HOC) that prevents unnecessary re-renders of functional components by memoizing the component output based on its props. It re-renders only if the props or the component's state change.

import React from 'react';

const MyComponent = React.memo(({ value }) => {
  console.log('Rendered');
  return <div>{value}</div>;
});

export default MyComponent;

Using useCallback and useMemo for Stable Reference

Similar to useMemo but for functions, useCallback prevents unnecessary function recreation when its dependencies haven't changed. This is particularly helpful for callback functions passed as props.

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

const MyComponent = ({ items }) => {
  const [count, setCount] = useState(0);

  const calculateTotal = useMemo(() => {
    return items.reduce((total, item) => total + item.price, 0);
  }, [items]);

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Total: {calculateTotal}</p>
      <button onClick={increment}>Increment: {count}</button>
    </div>
  );
};

export default MyComponent;

02. Code Splitting Technique

Lazy loading allows you to load components or modules only when they're needed. This reduces the initial bundle size and improves load times, especially for complex applications. React's built-in React.lazy and Suspense components facilitate this process.

import React, { lazy, Suspense } from 'react';

const MyLazyComponent = lazy(() => import('./MyLazyComponent'));

function MyComponent() {
  return (
    <div>
      <button onClick={() => import('./MyLazyComponent')}>Load Lazy Component</button>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

03. Efficient Event Handling

For frequently triggered events, consider Throttling or debouncing techniques to reduce the number of function calls. Throttling ensures the function executes at most once within a specified time interval, while debouncing only executes it after a period of inactivity.

Debouncing

import React, { useState } from 'react';
import { debounce } from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const handleSearch = debounce((event) => {
    setQuery(event.target.value);
    // Perform search operation
  }, 300);

  return <input type="text" onChange={handleSearch} />;
};

export default Search;

Throttling

import React, { useEffect, useRef } from 'react';

const AnimationComponent = () => {
  const ref = useRef();

  useEffect(() => {
    const animate = () => {
      // Update animation frame
      requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, []);

  return <div ref={ref}>Animating...</div>;
};

export default AnimationComponent;

04. Rendering Long Lists (Virtualized Lists)

When dealing with extensive lists, list virtualization becomes crucial. It renders only the visible items on the screen, significantly improving performance and reducing DOM manipulation. Popular libraries like react-window and react-virtualized offer efficient solutions

import React from 'react';
import { FixedSizeList as VirtualizedList } from 'react-window';

const ListItem = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const MyList = ({ items }) => (
  <VirtualizedList
    height={150}
    itemCount={items.length}
    itemSize={35}
    width={300}
  >
    {ListItem}
  </VirtualizedList>
);

export default MyList;

05. Track Performance Bottlenecks

Profiling is the cornerstone of optimization. Use React DevTools Profiler to identify performance bottlenecks in your components. It pinpoints areas consuming excessive rendering time, guiding your optimization efforts.

import React, { Profiler } from 'react';

const onRenderCallback = (
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) => {
  console.log('Render time:', actualDuration);
};

const App = () => (
  <Profiler id="App" onRender={onRenderCallback}>
    <MyComponent />
  </Profiler>
);

export default App;

06. Optimize Context Usage

Using useContextSelector from the use-context-selector library can help in avoiding unnecessary re-renders when using context.

import React from 'react';
import { useContextSelector } from 'use-context-selector';

const CountContext = React.createContext();

const Display = () => {
  const count = useContextSelector(CountContext, state => state.count);
  return <div>{count}</div>;
};

const App = () => {
  const [count, setCount] = React.useState(0);
  const contextValue = { count, setCount };

  return (
    <CountContext.Provider value={contextValue}>
      <Display />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </CountContext.Provider>
  );
};

export default App;

07. Usage of Fragment Components

Avoid unnecessary DOM nodes by wrapping JSX elements with React.Fragment. This prevents creating extra

elements for layout purposes.

import React, { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <p>Item 1</p>
      <p>Item 2</p>
    </Fragment>
  );
}

// OR

function MyComponent() {
  return (
    <>
      <p>Item 1</p>
      <p>Item 2</p>
    </>
  );
}