Your query works. But it is slow. The fix is almost always an index. This tutorial covers how indexes work in PostgreSQL, when to use them, and how to confirm they are actually helping. How a B-tree Index Works Without an index, PostgreSQL reads every row in the table to find matches. This is called a sequential scan. For a table with 10 million rows, that means 10 million comparisons. ...
In the previous tutorial, you handled errors with Error Boundaries. Now let’s make your React app fast. Rule #1: Profile Before Optimizing Do not add React.memo, useMemo, or useCallback everywhere. These tools add complexity and memory overhead. Only optimize when you have a measured problem. Use the React DevTools Profiler: Install React Developer Tools browser extension Open DevTools → Profiler tab Click Record → interact with your app → Stop See which components render and how long they take Only optimize components that show up as slow in the profiler. ...
In the previous tutorial, you built custom hooks. Now let’s learn three more hooks: useRef, useMemo, and useCallback. These hooks solve specific problems: useRef — access DOM elements or store values without triggering re-renders useMemo — cache expensive computed values useCallback — cache function references to prevent unnecessary re-renders useRef useRef creates a mutable container that persists across renders. Changing its .current value does not trigger a re-render. Accessing DOM Elements The most common use of useRef is accessing a DOM element directly: ...
Your app launches in 3 seconds. Users see a white screen. They close the app. Your retention drops. Performance is not optional. Google Play ranks apps by performance metrics. Users uninstall apps that feel slow. The difference between a 1-second and 3-second startup can be a 50% drop in engagement. In this tutorial — the final one in the series — you will learn how to measure and optimize your app’s performance using Baseline Profiles, Macrobenchmark, and modern profiling tools. ...
Figma’s canvas engine runs in your browser at desktop speed. Google Earth loads a 3D globe without a plugin. AutoCAD moved from a desktop app to a website. They all use WebAssembly. What is WebAssembly? WebAssembly — Wasm — is a binary format that browsers can run directly. It is not a programming language. It is a compile target. You write code in C++, Rust, Go, or another language. You compile it to a .wasm binary. The browser loads that binary and runs it at near-native speed. ...
Your app works. But it stutters when scrolling. The screen freezes for a split second when you type. Animations aren’t smooth. The problem isn’t Compose — it’s recomposition. Compose redraws parts of your UI when state changes. If it redraws too much, too often, your app feels slow. This tutorial will teach you why Compose gets slow and how to fix it. How Recomposition Works When state changes, Compose doesn’t redraw the entire screen. It redraws only the Composables that read the changed state. This is called recomposition. ...
In the previous tutorial, you learned about delegation. Now let’s learn about sequences. Sequences are lazy collections that process elements one at a time instead of all at once. This can make a big difference in performance when working with large data sets. In this tutorial, you will learn: Sequences vs Lists (lazy vs eager) Creating sequences generateSequence Sequence builders with yield and yieldAll Infinite sequences When to use sequences Performance comparison Practical examples Sequences vs Lists Lists are eager — they process all elements at each step and create intermediate collections. Sequences are lazy — they process one element through all steps before moving to the next. ...