2025-07-10
3293
Peter Aideloje
205750
110
Jul 10, 2025 â‹… 11 min read

React & TypeScript: 10 patterns for writing better code

Peter Aideloje I'm a passionate developer and technical writer whose interest aligns with full-stack software engineering, specifically Java, Csharp, and other frontend stacks like HTML5, CSS3, and JavaScript.

Recent posts:

file based routing in react router

File-based routing in React Router v7 – Why keep it optional?

Explore the new mode that introduced file-based routing in v7, why it remains optional, and when to use it or stick with a different approach.

Elijah Asaolu
Sep 9, 2025 â‹… 6 min read
mcp is the new browser

MCP is replacing the browser: Here’s how devs should prepare

Learn how MCP will replace the traditional browser, what this shift means for frontend devs, and how to start prepping for an AI-first future.

Peter Aideloje
Sep 9, 2025 â‹… 6 min read

Effective rendering with Selective SSR in TanStack Start

TanStack Start’s Selective SSR lets you control route rendering with server, client, or data-only modes. Learn how it works with a real app example.

Amazing Enyichi Agu
Sep 8, 2025 â‹… 10 min read
How Cursor Project Rules Can Improve Next.js App Development

How Cursor project rules can improve Next.js app development

Learn how Cursor project rules streamline Next.js apps with automated conventions, consistent components, and faster developer onboarding.

Muhammed Ali
Sep 8, 2025 â‹… 4 min read
View all posts

2 Replies to "React & TypeScript: 10 patterns for writing better code"

  1. I would like to submit a code review for the Record utility snippet! It should read:

    type Role = “admin” | “employee” | “viewer”;

    type Permissions = Record;

    const permissions: Permissions = {
    admin: [“read”, “write”, “delete”],
    employee: [“read”, “write”],
    viewer: [“read”],
    };

    1) The Role type name defined and the name used in the Record utility are inconsistent.

    2) The colons are missing in the key: value pairs of the object literal.

    It’s tough to catch these things without the error highlighting that IDEs provide. Great article!

  2. Thank you for catching that and for taking the time to share your feedback!

    You’re absolutely right on both points:
    1. The Role type named defined in the Record utility should be consistent (Roles or Role) — and in the case of using ‘Role’, the correct syntax would be:

    type Permissions = Record;
    2. Also, the object literal should include colons in the key-value pairs, like so:

    const permissions: Permissions = {
    admin: [“read”, “write”, “delete”],
    employee: [“read”, “write”],
    viewer: [“read”],
    };

    Appreciate you pointing it out, great eye! I’m glad you enjoyed the piece!

Leave a Reply