Available for collaboration

Hi, I'm Thai Bao.

Welcome to my Tech Stash.

Mình là một Full-stack Developer. Đây là nơi mình lưu trữ các bài viết, code snippets, và những thứ học được từ thực chiến — không có gì giả tạo, chỉ có code thật và vấn đề thật.

Đọc bài viết Code Snippets

Phân biệt useCallback và useMemo trong React: Tối ưu sao cho đúng?

Hướng dẫn chi tiết cách phân biệt, cách hoạt động và khi nào nên sử dụng hai hooks tối ưu hiệu suất phổ biến nhất trong React: useCallback và useMemo. Đừng lạm dụng chúng nếu bạn chưa hiểu rõ!

26/4/20263 phút đọc

Đọc thêm

Hàng mới ra lò

Xem tất cả

SecurityAuthenticationBasics

HttpOnly Cookie là gì? "Vũ khí tối thượng" bảo vệ Token khỏi tấn công XSS

2/5/20265 phút đọc

Web StorageJavaScript

Lưu trữ dữ liệu ở Client: Chọn Cookies, Local Storage hay Session Storage?

2/5/20264 phút đọc

APIAxiosDesign PatternReact

Axios Interceptor: Hiểu sâu kiến trúc Middleware và ứng dụng thực tế trong React

29/4/20264 phút đọc

NPMNode jsGit

Semantic Versioning (SemVer) là gì? Hiểu rõ các con số trong package.json

26/4/20263 phút đọc

ReactPerformanceHooks

Phân biệt useCallback và useMemo trong React: Tối ưu sao cho đúng?

26/4/20263 phút đọc

CODE SNIPPETS

Đặc sản của Tech Stash

Mẹo nhỏ, hook, pattern — copy về dùng liền.

Typescript

Supabase Realtime subscription

Subscribe vào realtime changes của một table trong Supabase.

const channel = supabase
  .channel('table-changes')
  .on(
    'postgres_changes',
    { event: '*', schema: 'public', table: 'posts' },
    (payload) => console.log(payload)
  )

Typescript

Tailwind v4 Dark Mode

Force dark mode vĩnh viễn trong Tailwind v4 không cần config file.

/* globals.css */
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

/* Force dark trên html tag */
/* <html class="dark"> trong layout.tsx */

Typescript

useWindowSize Hook

Custom hook lấy kích thước màn hình, auto-update khi resize.

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  useEffect(() => {
    const handler = () => setSize({

css

cn() utility function

Merge Tailwind classes đúng cách với clsx + tailwind-merge.

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Typescript

Zustand Store với TypeScript

Setup Zustand store đơn giản nhất, đủ dùng cho 80% use case.

interface BearState {
  bears: number;
  increase: () => void;
  reset: () => void;
}

const useStore = create<BearState>((set) => ({

Typescript

Next.js Image với blur placeholder

Tạo base64 blur placeholder cho ảnh để UX mượt hơn khi load.

import Image from 'next/image';

// Generate blur placeholder
const blurData = `data:image/svg+xml;base64,${
  Buffer.from('<svg ...>').toString('base64')
}`;

Vuốt sang để xem thêm →

Nhận thông báo mới mỗi tuần

Tổng hợp bài viết mới, snippet hay, và tips thực chiến gửi thẳng vào hộp thư. Không spam, không quảng cáo — chỉ có code.

Unsubscribe bất cứ lúc nào. No BS.