Dennis Kinuthia

FullStack Web Developer

I create fast, accessible, and modern web applications with TypeScript, React, and Next.js. Based in Nairobi, Kenya, I'm passionate about developer experience and building elegant solutions to complex problems.

Learn More Contact Me

About Me

TypeScript enthusiast based in Nairobi, Kenya with over 5 years of fullstack development experience. I specialize in building exceptional web experiences using modern technologies.

My expertise spans across React frameworks, bundlers, and rendering strategies. I've spoken at tech conferences like Rendercon-KE about the React ecosystem and regularly participate in the local developer community.

I excel at integrations with React and TypeScript, whether it's REST APIs, GraphQL clients like Apollo and Relay, tRPC, or service workers. My approach emphasizes type safety, clean architecture, and creating truly reusable components.

Checkout my code Checkout my Professional summary

Conference Talks & Presentations

RenderCon-KE

I presented "Exploring Modern React Rendering Strategies" at RenderCon Kenya, discussing different rendering patterns in modern React applications including SSR, SSG, ISR, and client-side rendering approaches.

ReactSSR overviewReact renderersReact frameworks

View Presentation Learn more about RenderCon

React Devs KE

I presented "TypeScript + React: Building Type-Safe Applications" at the React Developers Kenya meetup, demonstrating how to leverage TypeScript's type system to build more robust React applications.

ReactTypeScriptGenericsNPM packages

View Repository Learn more about React Devs KE

Certifications

ALX Software Engineering

Graduated: November 202312-Month Programme

Completed a comprehensive 12-month Software Engineering Programme with ALX Africa, specializing in Back-end development. The program covered fundamental computer science concepts, algorithms and data structures, system design, and practical software engineering skills.

Backend DevelopmentSystem DesignAlgorithmsData StructuresSoftware Architecture

Skills Acquired:

Backend system architecture and design
Database optimization and management MYSQL,Postgres
API design and implementation
System scaling and performance optimization
Linux basics and server management shell, SSH, UFW
DevOps and deployment strategies, Jenkins, Chef, Puppet

Learn More About ALX

Certificate verification: Scan the QR code or visit

this link

My Projects

Currently working on

mzalendo

last updated

20 hours ago

source code

Project details

movie-rentals-tanstack-db

last updated

21 hours ago

source code

Project details

agentic-geojson-builder

last updated

21 hours ago

source code

Project details

Ba

r

Private project

last updated

3 days ago

json-resume

last updated

3 days ago

Résumé as typed JSON. Tweak it with any LLM, edit it by hand. Export a clean PDF, same result every time. Store sections individually so you can reuse and remix them later, reassemble everything back into a polished PDF whenever you need.

betterauth
drizzle-orm
json-render
nextjs

site

source code

Project details

ba

r

Private project

last updated

4 days ago

My Latest Articles

🎨 TanStack Start SSR-Friendly Theme Provider
A complete theme management system for React applications with SSR support! ✨ 🌟...
Published at:
7/25/2025
read more
Building Android Widgets in Expo with Custom Native Modules
A guide to creating Android home screen widgets using Expo modules, complete with state management,...
Published at:
7/15/2025
read more
Setting Up Android Studio on Linux for React Native (Expo) Development
This comprehensive guide will walk you through installing and configuring Android Studio on Linux...
Published at:
7/15/2025
read more
vite-plugin-graphql-usage
🚀 Spent 5 hours automating a 5-minute task... and I regret nothing! At work, I kept finding myself...
Published at:
5/26/2025
read more

Cool thing i recently learned

Eliminating Theme Flash in Next.js Without Sacrificing Caching or Streaming

Storing a user’s theme preference in localStorage is convenient—no server round-trips, no cookie consent headaches. But it creates a classic problem: on the first paint, the page always shows the default theme, then quickly swaps to the saved one once JavaScript loads. That jarring flicker is known as a flash of incorrect theme. A common alternative is to store the theme in a cookie, read it server-side, and inject the correct class or data-attribute directly into the HTML. This eliminates the flash, but it comes with painful trade-offs: Caching suffers – The server can no longer return a static, cacheable response because the HTML depends on a per-user cookie. CDN caching and stale-while-revalidate effectively break. Streaming breaks – If you’re using Next.js App Router’s streaming or Suspense, you now need to await cookies() at the very root layout, blocking the entire stream and defeating the purpose. So we’re caught between a flicker and a performance cliff.

April 29, 2026

We can keep the theme in localStorage and still avoid the flash by injecting a tiny, synchronous script into the that reads the saved preference before the browser paints anything. Because it’s blocking, the correct theme is applied immediately without any visible transition.

Here’s a helper that generates that script:

// utils/themer.ts
export const THEME_STORAGE_KEY = "theme";

export function getThemeHeadBlockingInlineScript(): string {
  const key = JSON.stringify(THEME_STORAGE_KEY);
  return `(function(){var k=${key};var el=document.documentElement;var stored;try{stored=localStorage.getItem(k);}catch(e){}var pref=stored||"system";if(pref!=="light"&&pref!=="dark"&&pref!=="system"){pref="system";}var resolved=pref==="system"?(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"):pref;if(resolved==="light"||resolved==="dark"){el.setAttribute("data-theme",resolved);el.style.colorScheme=resolved;}})();`;
}

Place this script before any stylesheets or content in your root layout:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning data-scroll-behavior="smooth">
      <head>
        <script
          suppressHydrationWarning
          dangerouslySetInnerHTML={{
            __html: getThemeHeadBlockingInlineScript(),
          }}
        />
        <link rel="preconnect" href="https://images.unsplash.com" />
        <link rel="dns-prefetch" href="https://images.unsplash.com" />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

queueMicrotask : What It Is and When to Use It

While building a reusable shortcut hints component with TanStack Hotkeys, I hit React's "Cannot update a component while rendering a different component" error. Here's how queueMicrotask fixes it -- and when you should (and shouldn't) reach for it.

April 6, 2026

queueMicrotask schedules a callback to run after the current synchronous JavaScript finishes, but before the browser paints or processes macrotasks (like setTimeout). It sits in the microtask queue alongside resolved Promises.

Execution Order

hljs Synchronous code -> Microtasks (queueMicrotask, Promise.then) -> Macrotasks (setTimeout, setInterval) -> Browser paint

A Real-World React Bug and Fix

The Problem

You have two React components:

WardsContainer registers hotkeys using useHotkey from TanStack Hotkeys
HotkeyHints subscribes to the hotkey manager store to display active hotkeys

useHotkey internally calls setOptions() on the hotkey manager store during render. The store synchronously notifies all subscribers. HotkeyHints has a subscription that calls setHints() (a setState). This means a setState fires in HotkeyHints while WardsContainer is still mid-render.

React throws: Cannot update a component (HotkeyHints) while rendering a different component (WardsContainer).

Without queueMicrotask

useEffect(() => {
  const manager = getHotkeyManager();
  setHints(readHints(filter));
  const sub = manager.registrations.subscribe(() => setHints(readHints(filter)));
  return () => sub.unsubscribe();
}, [filter]);

The call chain is fully synchronous:

hljs WardsContainer render
  -> useHotkey calls setOptions (synchronous)
    -> store notifies subscribers (synchronous)
      -> HotkeyHints' setHints fires (synchronous, still inside WardsContainer's render)
        -> React error

With queueMicrotask

useEffect(() => {
  const manager = getHotkeyManager();
  setHints(readHints(filter));
  const sub = manager.registrations.subscribe(() => {
    queueMicrotask(() => setHints(readHints(filter)));
  });
  return () => sub.unsubscribe();
}, [filter]);

The synchronous chain is broken:

hljs WardsContainer render
  -> useHotkey calls setOptions (synchronous)
    -> store notifies subscribers (synchronous)
      -> callback queues a microtask (returns immediately)
WardsContainer render finishes
Microtask runs -> setHints fires -> HotkeyHints re-renders

Zero visual delay. The microtask runs before the next paint.

When to Reach for queueMicrotask

1. Breaking synchronous notification chains

Any time an external store subscription fires setState synchronously during another component's render:

store.subscribe(() => {
  queueMicrotask(() => setState(store.getSnapshot()));
});

2. Batching multiple synchronous state updates from non-React sources

If an external event emitter fires multiple events in a tight loop:

socket.on("batch-update", (items) => {
  items.forEach((item) => {
    queueMicrotask(() => updateItem(item));
  });
});

React 18+ auto-batches setState calls in the same microtask, so all updates consolidate into one render.

3. Deferring work that must happen before paint but after current execution

function handleClick() {
  setOptimisticState(newValue);

  queueMicrotask(() => {
    validateAndCorrectIfNeeded(newValue);
  });
}

queueMicrotask vs Alternatives

Approach	Timing	Use When
`queueMicrotask`	After sync, before paint	Breaking sync chains, need immediate-but-deferred
`Promise.resolve().then()`	Same as microtask	Same scenarios (microtask is cleaner and more explicit)
`setTimeout(fn, 0)`	After paint (macrotask)	Truly deferring to next event loop tick, OK with visual delay
`requestAnimationFrame`	Before next paint	Animation-related work
`React.startTransition`	Low-priority React update	Keeping UI responsive during expensive re-renders

When NOT to Use It

Inside React event handlers -- React already batches these. No deferral needed.
For heavy computation -- It blocks the paint just like synchronous code would. Use setTimeout or Web Workers instead.
As a general "fix React warnings" tool -- It masks the symptom. Only use it when you genuinely need to break a synchronous call chain from an external store.

typesafe tanstack query client setup

Tanstack query client setup with typed keys and meta options , The meta : {invalidates} is setup to invalidate all queries with that key prefix

July 17, 2025

import { MutationCache, QueryClient } from "@tanstack/react-query";


export const queryKeyPrefixes = {
  viewer: "viewer",
  auth: "auth",
} as const

type QueryKey = [keyof typeof queryKeyPrefixes, ...readonly unknown[]];

interface MyMeta extends Record<string, unknown> {
    invalidates?: [QueryKey[0], ...readonly unknown[]][];
    [key: string]: unknown;
}

declare module "@tanstack/react-query" {
  interface Register {
    queryKey: QueryKey;
    mutationKey: QueryKey;
    queryMeta: MyMeta;
    mutationMeta: MyMeta;
  }
}


export const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onSuccess: async (_, __, ___, mutation) => {
      if (Array.isArray(mutation.meta?.invalidates)) {
        // biome-ignore lint/complexity/noForEach: <explanation>
        mutation.meta?.invalidates.forEach((queryKey) => {
          return queryClient.invalidateQueries({
            queryKey,
          });
        });
      }
    },
  }),
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 60,
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
    },
  },
});

// example mutation using the meta field

useMutation({
  mutationFn: async (data: any) => {
    // Perform logout operation hree 
    return data;
  },
  meta: {
    invalidates: [
      ["viewer"],
      ["auth"],
    ],
  },
  onSuccess: () => {
    console.log("Mutation succeeded and queries invalidated");
  },
  onError: (error) => {
    console.error("Mutation failed:", error);
  }
});

Loading process env variables into your vite project (for DEV only)

Need environment variables only during development (like debug flags or local API URLs)? Here’s how to conditionally load them in Vite without leaking secrets:

June 11, 2025

// ⚠️ be careful what envs you load into vite for production builds because any env consumed by the built code will be sent to the client
// vite.config.ts
export default defineConfig(({ mode }) => {
  const devEnv = mode === "development" 
    ? loadEnv("development", process.cwd(), ["VITE_", "DEV_"]) 
    : {};

  return {
    server: {
      port: Number(devEnv.VITE_PORT || 3000),
    },
    define: {
      __DEV__: mode === "development", // Expose dev mode globally
    },
  };
});

Docker optmization tips

Resources for optimizing your final docker build sizes

January 27, 2025

Video tutorial by better stacks
Tool for minifying docker images
tool for exploring the docker layers

Adding Typings for JSON parse

Technique for making JSON parse emit the input object type instead of any

January 27, 2025

const obj = {
  a: 'hello',
  b: 1,
  c: undefined,
  d: {
    toJSON() {
      return 42;
    }
  },
  e: () => console.log('hi from e')
}

const str = JSON.stringify(obj);//?
//    ^?

const parsed = JSON.parse(str);
//     ^?

writePersonObject('');


function writePersonObject(str: Stringified<{firstname: string, lastname: string}>) {

}

type JsonifiedValue<T> = T extends string | number | null | boolean
? T 
: T extends {toJSON(): infer R} ? R
: T extends undefined | ((...args: any[]) => any) ? never
: T extends object ? JsonifiedObject<T>
: never;

type JsonifiedObject<T> = {
  [Key in keyof T as [JsonifiedValue<T[Key]>] extends [never] ? never : Key]: JsonifiedValue<T[Key]>
}

parsed.b

type Stringified<ObjType> = string & {source: ObjType};

interface JSON {
  stringify<T>(value: T, replacer?: null | undefined, space?: string | number): Stringified<T>;
  parse<T>(str: Stringified<T>, replacer?: null | undefined): JsonifiedObject<T>;
}

link

Talk to me

Dennis Kinuthia

FullStack Web Developer

About Me

Conference Talks & Presentations

RenderCon-KE

React Devs KE

Certifications

ALX Software Engineering

Skills Acquired:

My Projects

mzalendo

last updated

movie-rentals-tanstack-db

last updated

agentic-geojson-builder

last updated

Ba

r

Private project

last updated

json-resume

last updated

ba

r

Private project

last updated

🎨 TanStack Start SSR-Friendly Theme Provider

Published at:

Building Android Widgets in Expo with Custom Native Modules

Published at:

Setting Up Android Studio on Linux for React Native (Expo) Development

Published at:

vite-plugin-graphql-usage

Published at:

Eliminating Theme Flash in Next.js Without Sacrificing Caching or Streaming

queueMicrotask : What It Is and When to Use It

Execution Order

A Real-World React Bug and Fix

The Problem

Without queueMicrotask

With queueMicrotask

When to Reach for queueMicrotask

1. Breaking synchronous notification chains

2. Batching multiple synchronous state updates from non-React sources

3. Deferring work that must happen before paint but after current execution

queueMicrotask vs Alternatives

When NOT to Use It

typesafe tanstack query client setup

Loading process env variables into your vite project (for DEV only)

Docker optmization tips

Adding Typings for JSON parse