Forem: 56kode

Why we’re moving from Cursor to Claude Code (and why you should too)

56kode — Tue, 10 Feb 2026 13:46:54 +0000

I have been a developer for 16 years, and for the last year, Cursor was my go-to AI editor. It was a great tool that helped me transition from "coding" to "supervising."

However, I recently hit a wall. Between the high costs for teams and the heavy resource usage of the editor, I realized I was spending more time fighting the UI than actually building.

That is when I made the switch to Claude Code and a terminal-based workflow. In this article, I share my honest feedback on this migration and why I believe CLI agents are the future of development in 2026.

What you'll learn

✅ The real limitations of visual AI editors like Cursor.
✅ How I shipped a full personal project without writing a single line of code manually.
✅ Why the Opus model creates a massive gap in reasoning quality compared to others.
✅ My new hybrid stack: The Brain (Claude Code) + The Hands (Google Antigravity).
✅ Essential tips to "tame" the AI using MCPs, coding rules, and skills.

A taste of what's covered

The biggest shift wasn't technical; it was psychological. I realized that my value as a Lead Frontend Developer isn't in typing syntax anymore.

"I realized something fundamental: what I loved most wasn’t writing code, it was creating things and finding solutions to a problem. The code was just a tool. I was ready for the next step: the CLI code generator."

To make this work, you can't just run it out of the box. You need a structure. In the full article, I explain how I configure my environment with specific rules:

AGENTS.md / CLAUDE.md: Essential files so the AI understands your architecture.
MCP (Model Context Protocol): Connecting tools like Jira, Figma, and Context7 directly to the terminal.
Plan Mode: Forcing the AI to validate a strategy before it writes a single character of code.

This article details exactly how I regained my productivity and now feel like I have "superpowers," working on 2 or 3 projects simultaneously.

👉 Read the full article here: https://www.56kode.com/posts/moving-from-cursor-to-claude-code/

Efficiently cleaning a TypeScript project: Knip + AI agent workflow

56kode — Wed, 21 Jan 2026 15:31:25 +0000

Technical debt isn't just about architecture. In long-running TypeScript projects, it also accumulates as "noise": unused exports, orphaned files, and dependencies you no longer need. Cleaning this manually is risky and boring.

In my latest article, I share a workflow that combines Knip (a powerful static analysis tool) with an AI Agent to automate this cleanup safely.

What you'll learn

✅ Why manual cleanup is dangerous and how automatic tools can break your production.
✅ How to configure Knip correctly, especially to avoid the common "test files" trap.
✅ The @internal pattern: A smart way to keep exports for testing without confusing your analysis.
✅ The complete AI Workflow: How to use an AI agent to verify unused code and remove it (or tag it) without breaking your app.

A taste of what's covered

One of the biggest challenges when cleaning code is distinguishing between code that is truly unused and code that is only used in tests.

If you simply delete an export because it's not used in production, you might break your test suite. Instead of deleting it, our workflow teaches the agent to use the JSDoc @internal tag:

/**
 * @internal Exported for unit testing only - used internally by Cart component
 */
export const calculateTotal = (items: Item[]) => {
  // ...
};

This keeps your tests green while telling Knip (and other developers) to ignore this export in future cleanup runs.

This article provides the full configuration and the specific prompt to let an AI agent handle the tedious verification work for you.

👉 Read the full article here: Efficiently Cleaning a TypeScript Project: Knip + AI Agent Workflow

🚀 22s to 4s: How AI Fixed Our Vitest Performance

56kode — Wed, 26 Nov 2025 09:50:55 +0000

Running unit tests shouldn't feel like a coffee break. But on our main frontend project, that's exactly what happened. Every time we launched a single test file, we had to wait over 20 seconds before the first test even started.

We tried the usual fixes: tweaking the vitest.config.ts, isolating threads, optimizing mocks... Nothing worked. The bottleneck wasn't in the configuration—it was deep in our architecture.

In this article, I share how we used Gemini 3 Pro to identify and fix the issue, dividing our local test startup time by 5 and saving 15 minutes on every CI pipeline run.

What you'll learn in the full post

✅ The "God Module" Anti-Pattern: How importing a single utility can silently load your entire application.

✅ AI-Assisted Debugging: Why Gemini 3 Pro succeeded where other models failed to diagnose architectural flaws.

✅ The Refactoring Strategy: How we decoupled our Redux Store and Modal System to stop the dependency chain.

✅ Concrete Results: The before/after metrics that proved the fix worked.

A taste of the problem

The issue wasn't the test execution speed itself, but the transform and collect phases of Vitest.

Here is what running a single, isolated test looked like:

Test Files 1 passed (1)
Tests 3 passed (3)
Start at 09:32:08
Duration 22.53s (transform 12.53s, collect 21.47s, tests 323ms)

Notice the disconnect? 323ms to run the test, but 21+ seconds to prepare it.

The culprit? Our component imports were triggering a chain reaction. For example, importing a modal provider for a test was inadvertently importing every single modal in the application (Billing, Planning, Resources...), forcing Vitest to parse thousands of files unnecessarily.

The Fix

We used AI to refactor our architecture, splitting "heavy" UI providers from "light" contexts used in tests.

The result speaks for itself:

Duration 4.29s (transform 1.90s, setup 189ms, collect 3.44s)

If you are struggling with slow Vitest startup times or want to see how AI can help with complex architectural refactoring, check out the full story.

👉 Read the full article here: How Gemini 3 Pro cut our pipeline time in half

Debug Web Apps Directly from Cursor IDE with Browser-Tools MCP

56kode — Tue, 23 Sep 2025 08:23:28 +0000

Ever wished you could debug web applications without constantly switching between your code editor and browser? The Model Context Protocol (MCP) is transforming how developers integrate external tools into their IDEs, and Browser-Tools MCP takes this integration to the next level.

This powerful tool connects your Cursor IDE directly to Chrome or any Chromium-based browser, turning your AI assistant into a debugging partner that can analyze console logs, inspect network requests, examine DOM elements, and capture screenshots automatically.

What you'll learn

✅ How to set up Browser-Tools MCP with Cursor IDE in three simple steps

✅ Five essential debugging tools at your fingertips

✅ Real-world debugging scenarios with practical examples

✅ Network bottleneck identification and performance optimization

✅ Automated quality audits with Lighthouse integration

✅ Advanced configuration tips for professional workflows

A taste of what's covered

One of the most powerful features is automated console log analysis. Instead of manually checking browser DevTools, you can simply ask:

Analyze console logs to find user update errors.

The AI runs Get Console Logs and identifies patterns in your React components:

// Fetch users on mount
useEffect(() => {
  fetchUsers()
    .then(data => {
      setUsers(data);
    })
    .catch(err => {
      console.error("Fetch failed:", err);
    });
}, []);

For network debugging, Browser-Tools MCP can analyze XHR requests and suggest optimizations:

useEffect(() => {
  fetch("/api/products?limit=1000")
    .then(res => res.json())
    .then(data => setProducts(data));
}, [filters]);

The AI automatically identifies performance bottlenecks and recommends pagination or caching strategies.

We also explore advanced features like DOM element inspection, automated screenshot capture, and native Lighthouse audits - all triggered directly from your IDE without leaving your coding environment.

This integration removes the friction from debugging workflows and creates a seamless development experience where AI, browser tools, and your code editor work together as one unified system.

👉 Read the complete setup guide with step-by-step installation instructions and practical examples: https://www.56kode.com/posts/connect-cursor-to-your-browser-with-browser-tools-mcp/

How AI Automated My Astro 4 to Astro 5 Migration: A Real-World Example

56kode — Wed, 10 Sep 2025 09:26:26 +0000

Upgrading dependencies can feel overwhelming, especially when a big update like Astro 4 to Astro 5 brings major breaking changes. After my vacation, I faced 22 outdated packages on my Astro blog. Instead of tackling them all manually, I let AI handle the entire migration process — including the challenging Content Layer redesign in Astro 5.

What you'll learn

✅ How to prepare and categorize dependency updates by risk level

✅ Tackling Astro 5’s new Content Layer API and migration challenges

✅ Adapting your content collections and rendering code for Astro 5

✅ Managing routing changes like switching from slug to id

✅ Handling complex TypeScript errors pragmatically during migration

A taste of what's covered

One major challenge was replacing the old post.render() rendering method with Astro 5’s new Content Layer API. The AI discovered that instead of rendering with a method, you now access the rendered HTML directly:

// Old way in Astro 4
const { Content } = await post.render();

// New way in Astro 5
const renderedHTML = post.rendered?.html;

The migration also meant updating routing logic to use id instead of slug in some contexts:

// Before
{featuredPosts.map(({ data, slug }) => (
  <Card href={`/posts/${slug}/`} frontmatter={data} />
))}

// After
{featuredPosts.map(({ data, id }) => (
  <Card href={`/posts/${id}/`} frontmatter={data} />
))}

Conclusion

This real migration shows how AI can help automate complex upgrades and navigate tricky API changes — saving you time and headaches. Want to see the full step-by-step process and lessons learned?

👉 Read the full article here: https://www.56kode.com/posts/automated-astro-dependencies-update-cursor-claude/

Level Up React: Mastering Context API

56kode — Tue, 20 May 2025 15:21:49 +0000

React’s Context API is powerful — but misunderstood. It’s often praised for avoiding prop drilling, yet many developers misuse it and end up with performance issues or overly complex code.

In this article, I break down how Context really works, when to use it, and how to avoid common mistakes. We’ll also take a quick look at what’s new in React 19 for context.

What you'll learn

✅ How the Context API works under the hood
✅ When not to use Context (and what to use instead)
✅ Real examples comparing Context vs Zustand and Redux
✅ Performance tips to avoid unnecessary re-renders
✅ What’s new in React 19 with use() and async context

A taste of what's covered

Many developers use Context to manage app-wide state — but that often leads to unnecessary re-renders. Here’s an example of why:

// One context, multiple consumers = one big re-render
<MyContext.Provider value={{ user }}>
  <UserProfile />  // re-renders even if only theme changes
  <ThemeSwitcher />
</MyContext.Provider>

Instead, splitting context helps isolate updates:

<UserContext.Provider value={user}>
  <ThemeContext.Provider value={theme}>
    <App />
  </ThemeContext.Provider>
</UserContext.Provider>

We also explore why Zustand or Redux might be better in some cases — and how React 19 introduces new patterns for async data with context.

Want to go deeper?

If you want to finally master the Context API, avoid common traps, and understand how React 19 changes the game —
👉 Read the full article here: https://56kode.com/posts/level-up-react-mastering-context-api

Level Up React: Mastering useReducer for structured state management

56kode — Tue, 15 Apr 2025 14:24:02 +0000

When working with React components, most developers start with useState for state management. It's intuitive, easy to use, and works perfectly for simple cases. But what happens when your state logic becomes more complex? When your components manage multiple related state values? That's where useReducer comes in - and it's more powerful than you might think.

What you'll discover in my full article

✅ Why useState becomes unwieldy for complex state management

✅ How useReducer centralizes and structures your business logic

✅ Practical implementation using a real-world e-commerce cart example

✅ TypeScript integration for type-safe state transitions

✅ Testing strategies for reducer-based components

✅ When to choose useReducer over useState (and when not to)

✅ Advanced patterns combining useReducer with useContext

A taste of what's covered

One of the key problems with using multiple useState hooks is how quickly your component logic becomes fragmented. Consider this simplified shopping cart example:

function ShoppingCartWithUseState() {
  const [items, setItems] = useState<Product[]>([]);
  const [total, setTotal] = useState(0);
  const [itemCount, setItemCount] = useState(0);

  // Add a product to the cart
  const addItem = (product: Product) => {
    const newItems = [...items, product];
    setItems(newItems);

    // We need to manually update related state
    const newTotal = calculateTotal(newItems);
    setTotal(newTotal);
    setItemCount(itemCount + 1);
  };

  // Remove a product
  const removeItem = (productId: string) => {
    const newItems = items.filter(item => item.id !== productId);
    setItems(newItems);

    // Again, manual updates for all related state
    const newTotal = calculateTotal(newItems);
    setTotal(newTotal);
    setItemCount(itemCount - 1);
  };

  // Component rendering...
}

With useReducer, this scattered logic gets centralized into a predictable pattern:

// Using useReducer instead
function ShoppingCartWithReducer() {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  // Add a product
  const addToCart = (product: Product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  // Remove a product
  const removeFromCart = (id: string) => {
    dispatch({ type: 'REMOVE_ITEM', payload: { id } });
  };
}

The reducer handles all the interdependent state updates in one place, making your code more maintainable and easier to test.

Why this matters for your React applications

State management is often the most challenging aspect of building React applications. As your apps grow in complexity, having a structured approach to state transitions becomes crucial for maintainability.

The full article demonstrates how to implement a complete shopping cart system using useReducer, including handling discounts, checkout processes, and error states - all with clean, testable code.

Ready to level up your state management?

If you're building React applications with complex state interactions, you'll definitely want to master the useReducer pattern. It's not just an alternative to useState - it's a powerful tool that can transform how you think about state management in React.

👉 Read the full article here

Advanced number typing in TypeScript

56kode — Fri, 28 Mar 2025 14:44:56 +0000

Introduction

TypeScript significantly enhances number typing beyond the basic number type. While declaring a variable with the number type is the first step in typing, TypeScript offers advanced features that allow you to precisely define not only the type but also the constraints and behaviors of numeric values. These advanced capabilities transform number typing into a powerful tool for data validation, code documentation, and error prevention.

In this article, we'll explore advanced number typing techniques in TypeScript, from literal types to conditional types, including utility types and generic types. These techniques are essential tools for any frontend developer concerned with code quality and maintainability.

Numeric literal types and unions

Defining specific values

Numeric literal types allow you to restrict a variable to a specific numeric value, rather than any number.

// Literal type - restricts to a specific value
type Zero = 0;
type One = 1;

let binaryDigit: 0 | 1 = 0;
binaryDigit = 1; // OK
binaryDigit = 2; // Error: Type '2' is not assignable to type '0 | 1'.

This approach is particularly useful for representing binary states or specific numeric constants in your application.

Unions of literals to restrict possible values

Unions of numeric literal types allow you to create types that only accept a predefined set of numeric values.

// Union of numeric literals
type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;
type HttpSuccessCode = 200 | 201 | 204;
type HttpErrorCode = 400 | 401 | 403 | 404 | 500;

let statusCode: HttpSuccessCode | HttpErrorCode = 200;
statusCode = 404; // OK
statusCode = 302; // Error: Type '302' is not assignable to type 'HttpSuccessCode | HttpErrorCode'.

This technique offers several advantages:

Implicit documentation of acceptable values
Compile-time checking
Autocompletion in the IDE

Unions of numeric literals are particularly useful for typing business constants, HTTP status codes, or enumerated values like days of the week or months of the year.

Branded number types

TypeScript doesn't natively distinguish between different categories of numbers (integers, positive numbers, etc.). However, we can use the "type branding" technique to create specialized numeric types.

Integers vs floating-point numbers

// Type to represent an integer
type Integer = number & { __brand: "Integer" };

// Function to validate that a number is an integer
function asInteger(value: number): Integer {
  if (!Number.isInteger(value)) {
    throw new Error(`Value ${value} is not an integer`);
  }
  return value as Integer;
}

// Usage
const count = asInteger(42);
// count is now typed as Integer

Positive and negative numbers

// Types to represent positive and negative numbers
type PositiveNumber = number & { __brand: "PositiveNumber" };
type NegativeNumber = number & { __brand: "NegativeNumber" };
type NonNegativeNumber = number & { __brand: "NonNegativeNumber" };

// Validation functions
function asPositive(value: number): PositiveNumber {
  if (value <= 0) {
    throw new Error(`Value ${value} is not a positive number`);
  }
  return value as PositiveNumber;
}

function asNonNegative(value: number): NonNegativeNumber {
  if (value < 0) {
    throw new Error(`Value ${value} is not a non-negative number`);
  }
  return value as NonNegativeNumber;
}

// Usage
const age = asNonNegative(25);
const profit = asPositive(1000);

Numbers in a specific range

// Type to represent a number in a range
type NumberInRange<Min extends number, Max extends number> = number & {
  __brand: `NumberInRange<${Min}, ${Max}>`;
};

// Function to validate that a number is in a range
function inRange<Min extends number, Max extends number>(
  value: number, 
  min: Min, 
  max: Max
): NumberInRange<Min, Max> {
  if (value >= min && value <= max) {
    return value as NumberInRange<Min, Max>;
  }
  throw new Error(`Value ${value} is not in range [${min}, ${max}]`);
}

// Specific type for a percentage (0-100)
type Percentage = NumberInRange<0, 100>;

// Function to validate a percentage
function asPercentage(value: number): Percentage {
  return inRange(value, 0, 100);
}

// Usage
const score = asPercentage(85);
const temperature = inRange(22, -50, 50);

These specialized types are particularly useful for APIs that require constraints on numeric values, such as ages, quantities, prices, etc.

Simple arithmetic operations at the type level

TypeScript allows for some simple arithmetic operations at the type level, albeit with important limitations.

Adding small numbers

// Utility type for adding two small numbers
type Add<A extends number, B extends number> = [
  ...Array<A extends number ? A : never>,
  ...Array<B extends number ? B : never>
]['length'];

// Usage examples (works only for small numbers)
type Sum1 = Add<3, 4>; // Type: 7
type Sum2 = Add<0, 5>; // Type: 5

Subtracting small numbers

// Utility type for subtraction (A - B) where A >= B
type Subtract<A extends number, B extends number> = 
  A extends B ? 0 :
  [...Array<A extends number ? A : never>] extends 
    [...Array<B extends number ? B : never>, ...infer Rest] 
      ? Rest['length'] 
      : never;

// Usage examples
type Diff1 = Subtract<7, 3>; // Type: 4
type Diff2 = Subtract<5, 0>; // Type: 5

These implementations have important limitations:

They only work for small numbers (generally < 20) due to TypeScript's recursion limits
They don't handle negative numbers or floating-point numbers
They can cause stack overflow errors for larger values

These types are primarily useful for specific use cases involving small constant numbers.

Generating simple numeric sequences

Recursive types can be used to generate simple numeric sequences.

// Type to generate a sequence of numbers from 0 to N-1
// Note: Works only for small values of N (generally < 20)
type Range<N extends number, Acc extends number[] = []> = 
  Acc['length'] extends N 
    ? Acc[number] 
    : Range<N, [...Acc, Acc['length']]>;

// Usage examples
type ZeroToFive = Range<6>; // Type: 0 | 1 | 2 | 3 | 4 | 5
type Digits = Range<10>; // Type: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

This recursive type generates a union of all integers from 0 to N-1. It's particularly useful for creating types that represent array indices or positions.

Practical applications in a React context

Typing numeric props with constraints

Advanced number typing techniques are particularly useful for defining React props with precise constraints:

// Types for props with numeric constraints
type ProgressBarProps = {
  value: Percentage; // Must be between 0 and 100
  min?: number; // Minimum value (default 0)
  max?: number; // Maximum value (default 100)
  steps?: 5 | 10 | 20 | 25; // Number of steps
};

// React component with strict typing
function ProgressBar({ value, min = 0, max = 100, steps }: ProgressBarProps) {
  // Component implementation
  return (
    <div className="progress-bar">
      <div 
        className="progress-bar-fill" 
        style={{ width: `${value}%` }}
      />
      {steps && (
        <div className="progress-bar-steps">
          {/* Generation of steps */}
        </div>
      )}
    </div>
  );
}

// Usage
function App() {
  const progress = asPercentage(75);

  return (
    <div>
      <ProgressBar value={progress} steps={10} />
      {/* Compilation error: */}
      {/* <ProgressBar value={150} /> */}
      {/* <ProgressBar value={progress} steps={15} /> */}
    </div>
  );
}

In this example, we use advanced typing to ensure that:

The progress value is a valid percentage (between 0 and 100)
The number of steps is one of the predefined values (5, 10, 20, or 25)

Typing numeric states in hooks

React hooks can also benefit from advanced number typing:

// Custom hook with advanced typing
function useCounter(
  initialValue: number = 0, 
  min: number = Number.MIN_SAFE_INTEGER,
  max: number = Number.MAX_SAFE_INTEGER
) {
  const [count, setCount] = useState<number>(
    Math.min(Math.max(initialValue, min), max)
  );

  const increment = useCallback(() => {
    setCount(prev => prev < max ? prev + 1 : prev);
  }, [max]);

  const decrement = useCallback(() => {
    setCount(prev => prev > min ? prev - 1 : prev);
  }, [min]);

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]);

  return { count, increment, decrement, reset };
}

// Usage with specific constraints
function ItemCounter() {
  const { count, increment, decrement } = useCounter(1, 1, 10);

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count} items</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

This custom hook ensures that the counter value always stays within the specified limits, which is particularly useful for item counters, pagination controls, or other UI elements that manipulate constrained numeric values.

Validating numeric inputs

// Hook to handle numeric inputs with validation
function useNumericInput<T extends number>(
  initialValue: T,
  validator: (value: number) => T
) {
  const [value, setValue] = useState<T>(initialValue);
  const [error, setError] = useState<string | null>(null);

  const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = parseFloat(event.target.value);

    if (isNaN(newValue)) {
      setError("Please enter a valid number");
      return;
    }

    try {
      const validatedValue = validator(newValue);
      setValue(validatedValue);
      setError(null);
    } catch (err) {
      setError((err as Error).message);
    }
  }, [validator]);

  return { value, error, handleChange };
}

// Usage with a percentage field
function PercentageInput() {
  const { value, error, handleChange } = useNumericInput(0, asPercentage);

  return (
    <div>
      <label>
        Percentage:
        <input 
          type="number" 
          value={value} 
          onChange={handleChange}
          min="0"
          max="100"
        />
      </label>
      {error && <p className="error">{error}</p>}
    </div>
  );
}

This custom hook combines React state management with TypeScript type validation to create a robust numeric input component that ensures values meet the defined constraints.

Conclusion

Advanced number typing in TypeScript goes well beyond the simple number type. Numeric literal types, unions, type branding, and conditional types offer flexibility and type safety that transform how we design our interfaces and systems.

These techniques allow creating clearer APIs, more robust design systems, and more maintainable applications. By precisely defining the constraints and behaviors of numeric values, we reduce the risk of errors, improve autocompletion and documentation, and facilitate collaboration between team members.

Advanced number typing is a fundamental aspect of TypeScript that perfectly illustrates the language's philosophy: providing powerful tools for static code validation while preserving JavaScript's flexibility and expressiveness.

Level Up React: Mastering useEffect for performant React applications

56kode — Tue, 18 Mar 2025 16:18:56 +0000

The useEffect hook is deceptively simple. Most React developers learn to use it early on, but few truly understand its inner workings. This knowledge gap can lead to subtle bugs, performance issues, and code that's difficult to maintain as your applications grow.

In my latest article in the "Level Up React" series, I dive deep into the complexities of useEffect and explore how to use it effectively in real-world scenarios.

What You'll Learn

✅ The actual execution cycle of useEffect (it's not when you might think!)

✅ How the dependency array works under the hood

✅ Common pitfalls that even experienced developers encounter

✅ When you should not use useEffect (and what to use instead)

✅ Practical techniques for synchronizing with external systems

✅ Testing components that use useEffect

A Glimpse Into the Article

One common mistake developers make is creating infinite loops with useEffect, especially when fetching data:

// ❌ Creating an infinite loop
function NotificationCenter() {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  useEffect(() => {
    // Fetching notifications from the API
    fetchNotifications().then(newNotifications => {
      // This update triggers a new render
      setNotifications([...notifications, ...newNotifications]);
    });
  }, [notifications]); // notifications is a dependency

  return (
    <div className="notification-center">
      {notifications.map(notification => (
        <NotificationItem key={notification.id} data={notification} />
      ))}
    </div>
  );
}

In the article, I explain why this happens and show you how to fix it:

// ✅ Solution: Using the functional updater
function NotificationCenter() {
  const [notifications, setNotifications] = useState<Notification[]>([]);

  useEffect(() => {
    fetchNotifications().then(newNotifications => {
      // This form of setState doesn't need to depend on the current state
      setNotifications(prevNotifications => [
        ...prevNotifications,
        ...newNotifications
      ]);
    });
  }, []); // One-time execution at mounting
}

I also cover less obvious scenarios, like when you actually shouldn't use useEffect at all - something that even experienced React developers often miss.

Ready to Level Up?

This article is designed for React developers who want to go beyond the basics and truly understand how useEffect works under the hood. Whether you're dealing with complex data fetching, managing subscriptions, or synchronizing with external systems, mastering useEffect will help you write more predictable, performant, and maintainable React code.

👉 Read the full article here: https://www.56kode.com/posts/level-up-react-mastering-useeffect-for-performant-applications/

Advanced string typing in TypeScript

56kode — Fri, 14 Mar 2025 16:49:05 +0000

Introduction

TypeScript significantly enriches string typing beyond the basic string type. While declaring a variable as type string is the first step in typing, TypeScript offers advanced features that allow you to precisely define not only the type but also the format and content of strings. These advanced capabilities transform string typing into a powerful tool for data validation, code documentation, and error prevention.

In this article, we'll explore advanced string typing techniques in TypeScript, from union types to Template Literal Types, including string extraction and transformation through conditional types. These techniques are essential tools for any frontend developer concerned with code quality and maintainability.

Union of literals to restrict possible values

Union of literal types is a fundamental technique that restricts a string to a predefined set of values. Unlike the generic string type that accepts any string, unions of literals create types that only accept specific values.

// Union of literals - restricts to specific values
type Direction = "north" | "south" | "east" | "west";
let compassDirection: Direction = "north";
compassDirection = "northwest"; // Error: Type '"northwest"' is not assignable to type 'Direction'.

This approach offers several advantages:

Implicit documentation: The type itself documents the acceptable values.
Compile-time checking: Errors are detected before execution.
Autocompletion: The IDE can suggest valid values.

Unions of literals are particularly useful for React component props that accept a limited set of values such as button variants ("primary", "secondary", "danger"), interface states ("loading", "success", "error"), or user permissions ("admin", "editor", "viewer").

These types can also be combined with other types to create more complex structures, like a Status type that can be "pending", "loading", "success", "error" or null.

Template Literal Types: dynamic type generation

Introduced in TypeScript 4.1, Template Literal Types allow you to generate new string types using syntax similar to JavaScript template literals. This powerful feature lets us define string patterns rather than specific values.

// Definition of a type with Template Literal
type ColorVariant = "dark" | "light";
type ColorName = "red" | "green" | "blue";

// Generation of all possible combinations
type ColorClass = `color-${ColorVariant}-${ColorName}`;

In this example, TypeScript automatically generates all possible combinations of variants and color names, creating a type that accepts exactly six values: "color-dark-red", "color-dark-green", etc.

Template Literal Types are particularly useful for design systems that use consistent naming conventions. For example, in a BEM (Block, Element, Modifier) architecture, you could define types to automatically generate all valid CSS classes.

This approach can also be used with generics to create functions that preserve type information, such as a createClassName function that would take a prefix and a variant and return the combination with the exact type.

String extraction and transformation with conditional types

TypeScript allows you to extract and transform parts of strings using conditional types combined with type inferences. This feature enables you to create derived types based on string patterns.

// Extraction of substrings with conditional types
type ExtractPrefix<S extends string> = 
  S extends `prefix-${infer Rest}` ? Rest : never;

// Usage
type ResultType = ExtractPrefix<"prefix-value">; // Type: "value"

The infer operator is used here to capture a part of the string that matches the pattern, and this part can then be used in the result of the conditional type.

For more complex transformations, you can create recursive types that progressively modify the string. Here's a complete example of transforming camelCase to snake_case:

// Transformation from camelCase to snake_case
type CamelToSnake<S extends string> = 
  S extends `${infer T}${infer U}`
    ? `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${CamelToSnake<U>}`
    : S;

// Usage examples
type SnakeCaseExample1 = CamelToSnake<"getUserData">; // Type: "get_user_data"
type SnakeCaseExample2 = CamelToSnake<"APIResponse">; // Type: "_a_p_i_response"
type SnakeCaseExample3 = CamelToSnake<"userId">; // Type: "user_id"

This recursive type works by:

Breaking down the string character by character with infer T and infer U
Checking if the current character (T) is uppercase with T extends Capitalize<T>
Adding an underscore before uppercase letters and converting everything to lowercase
Recursively applying the transformation to the rest of the string (U)

In a React context, these types can be used to automatically map API properties to consistent formats, ensuring that naming convention differences between backend and frontend don't cause errors.

Constraining formats with Template Literal Types

One of the most powerful applications of Template Literal Types is the ability to constrain strings to follow a specific format. This feature is particularly useful for typing identifiers, URLs, file paths, or other strings that must follow a particular structure.

// Constraint for a UUID format
type UUID = `${string}-${string}-${string}-${string}-${string}`;

// Constraint for a simplified email address
type EmailAddress = `${string}@${string}.${string}`;

// Constraint for an API endpoint
type APIEndpoint = `/api/${string}`;

These constraints are checked at compile time but remain relatively flexible. For stricter validations, we can combine Template Literal Types with unions of literals, for example to create a type that only matches a valid semver format.

In a React context, these types can be used to validate props that must follow a specific format, such as route paths or URL parameters.

Advanced applications of Template Literal Types

Template Literal Types offer advanced possibilities beyond the simple examples seen previously. They notably allow building complex typing systems for configurations, themes, or DSLs (Domain Specific Languages).

Generating typed mappings

A particularly useful application is generating typed mappings where keys follow a specific format:

// Generating a typed CSS configuration
type CSSProperty = "margin" | "padding" | "border";
type CSSDirection = "top" | "right" | "bottom" | "left";

// Generating CSS properties with direction
type CSSPropertyWithDirection = {
  [K in `${CSSProperty}${Capitalize<CSSDirection>}`]: string;
};

// Result equivalent to:
// {
//   marginTop: string;
//   marginRight: string;
//   marginBottom: string;
//   marginLeft: string;
//   paddingTop: string;
//   ... etc
// }

This technique allows automatically generating complete interfaces from basic types, reducing duplication and improving maintainability.

Complex conditional transformations

Template Literal Types can be combined with conditional types to create complex transformations:

// Creating typed Redux action types
type Entity = "user" | "post" | "comment";
type ActionType = "fetch" | "create" | "update" | "delete";

// Generating action types
type ActionTypes = {
  [E in Entity]: {
    [A in ActionType]: A extends "fetch" 
      ? `${A}_${E}s_request` | `${A}_${E}s_success` | `${A}_${E}s_failure`
      : `${A}_${E}_request` | `${A}_${E}_success` | `${A}_${E}_failure`
  }
};

// Usage
type UserActionType = ActionTypes["user"]["fetch"]; 
// Type: "fetch_users_request" | "fetch_users_success" | "fetch_users_failure"

This example automatically generates all possible Redux action types with their appropriate plural or singular form according to the action type.

Conclusion

Advanced string typing in TypeScript goes well beyond the simple string type. Unions of literals, Template Literal Types, string extraction and transformation offer flexibility and type safety that transform how we design our interfaces and systems.

These techniques allow creating clearer APIs, more robust design systems, and more maintainable applications. By precisely defining the formats and possible values for strings, we reduce the risk of errors, improve autocompletion and documentation, and facilitate collaboration between team members.

Advanced string typing is a fundamental aspect of TypeScript that perfectly illustrates the language's philosophy: providing powerful tools for static code validation while preserving JavaScript's flexibility and expressiveness.

As experienced React developers, judicious use of these techniques can significantly improve the quality and maintainability of our applications, while facilitating early detection of potential errors.

Clean code: Why prefer unknown over any in TypeScript

56kode — Fri, 07 Mar 2025 14:55:06 +0000

TypeScript offers two main types for handling values whose type is not known in advance: any and unknown. While they may seem similar, these types have fundamental differences that make unknown a safer choice in most situations.

The fundamental difference

The any type completely disables the typing system for the concerned value, while unknown is a type that requires explicit checks before any use.

// With any
let dataAny: any = JSON.parse('{"x": 10}');
console.log(dataAny.x); // OK
console.log(dataAny.nonExistent.property); // OK at compilation, error at runtime

// With unknown
let dataUnknown: unknown = JSON.parse('{"x": 10}');
console.log(dataUnknown.x); // Compilation error

The advantages of unknown

1. Increased type safety

With unknown, you are forced to check the type before using a value, which greatly reduces runtime errors.

function processValue(value: unknown): string {
  // Required to check the type before using value
  if (typeof value === "string") {
    return value.toUpperCase();
  }

  if (typeof value === "number") {
    return value.toString();
  }

  return "Unsupported type";
}

2. More explicit code

Using unknown makes code more explicit by forcing developers to document expected types through checks.

// With any, the real type remains implicit
function handleDataAny(data: any) {
  return data.count * 2; // What happens if data.count is not a number?
}

// With unknown, the expected type is explicitly checked
function handleDataUnknown(data: unknown) {
  if (typeof data === "object" && data !== null && "count" in data && typeof data.count === "number") {
    return data.count * 2; // Safe
  }
  throw new Error("Invalid data format");
}

3. Better error detection

unknown allows errors to be detected at compilation rather than runtime.

let obj: any = { name: "TypeScript" };
console.log(obj.getName()); // Error at runtime

let objUnknown: unknown = { name: "TypeScript" };
// console.log(objUnknown.getName()); // Compilation error

Practical examples of using unknown

1. Safe JSON parsing

function parseConfig(jsonString: string): { port: number } | null {
  try {
    const config: unknown = JSON.parse(jsonString);

    if (
      config && 
      typeof config === "object" && 
      "port" in config && 
      typeof config.port === "number"
    ) {
      return { port: config.port };
    }

    return null;
  } catch {
    return null;
  }
}

2. API response handling

async function fetchUserData() {
  const response = await fetch('https://api.example.com/user');
  const data: unknown = await response.json();

  if (
    data && 
    typeof data === "object" && 
    "name" in data && 
    typeof data.name === "string"
  ) {
    return `Hello, ${data.name}!`;
  }

  return "Invalid user data";
}

3. Custom type guards

interface User {
  id: number;
  name: string;
}

// Custom type guard
function isUser(value: unknown): value is User {
  return (
    typeof value === "object" &&
    value !== null &&
    "id" in value &&
    "name" in value &&
    typeof value.id === "number" &&
    typeof value.name === "string"
  );
}

function processUser(input: unknown) {
  if (isUser(input)) {
    // TypeScript now knows that input is of type User
    console.log(`User: ${input.name}`);
  }
}

When to use any

Here are situations where any might be justified:

Integration with libraries without type definitions - When the typing effort would be excessive for an external library without types.
Gradual migration from JavaScript to TypeScript - To gradually convert an existing codebase without blocking everything.
Extreme cases where the type is truly unpredictable - Very rare, but can happen in specific contexts where even with checks, the type cannot be determined with certainty.

Conclusion

The unknown type represents a safer approach than any for handling values of unknown type in TypeScript. It offers a good balance between flexibility and type safety, allowing you to work with data of unknown structure while maintaining typing rigor.

By choosing unknown by default and reserving any for exceptional cases, you will get code that is more solid, easier to maintain, and less prone to runtime errors.

Level Up React: Deep Dive into State and useState

56kode — Tue, 04 Mar 2025 17:06:36 +0000

React's useState hook might seem simple at first glance, but there's much more to it than meets the eye. In this article, we'll explore everything you need to know about managing state in React functional components.

What you'll learn

How useState actually works behind the scenes
Why state updates are asynchronous and how to handle this correctly
Techniques for optimizing performance with lazy initialization
Best practices for working with complex state objects
Common pitfalls and how to avoid them
When to use useState vs useReducer

A taste of what's covered

The asynchronous nature of state updates often catches developers by surprise:

function AsynchronousExample() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // Still shows the old value!
  };

  return (
    <button onClick={handleClick}>
      Increment ({count})
    </button>
  );
}

We explore solutions like using the functional update pattern:

setCount(prevCount => prevCount + 1);

We also cover advanced topics like performance optimization in React 19:

// The expensive processing only runs when data changes
const processedData = useMemo(() => {
  return data.map(item => /* complex processing */);
}, [data]);

This article aims to be a comprehensive resource for both beginners and experienced React developers who want to improve their understanding of state management.

Read the full article at: Level Up React: Deep Dive into State and useState