Forem: Suman Bhattarai

App Signing Explained 📱: Keystores, Certificates, and Provisioning Profiles

Suman Bhattarai — Wed, 25 Feb 2026 00:41:04 +0000

📱 App Signing Explained: Keystores, Certificates, and Provisioning Profiles (Without the Headache)

If you've ever tried to publish a mobile app and found yourself drowning in terms like "keystore," "provisioning profile," "certificate," and "signing identity" — you're not alone. These concepts confuse developers at every level. This post will break them all down using plain language and everyday analogies, and then explain how Expo (a popular React Native framework) handles all of this for you.

Let's start from the very beginning.

🤔 Why Does App Signing Even Exist?

Imagine you receive a letter in the mail. How do you know it's really from who it claims to be from? In the physical world, you might look for an official letterhead, a notary stamp, or a wax seal. These things prove authenticity — they confirm the letter came from a legitimate source and wasn't tampered with on the way to you.

App signing works the same way. When you install an app on your phone, your phone needs to answer two questions:

👤 Who made this app? Is it really from the developer it claims to be from?
🔍 Has this app been tampered with? Has anyone modified the code since the developer built it?

App signing is the technology that answers both of these questions. Every app you publish must be "signed" — essentially stamped with a unique digital seal — before the app stores (Google Play and Apple App Store) will accept it, and before users' phones will trust it.

🕯️ The Wax Seal Analogy

Think of app signing like a medieval wax seal on a letter.

The seal mold (your private key) is unique to you. Only you have it, and you keep it secret.
The wax impression (the digital signature) is stamped onto the letter (your app). Anyone can look at it and verify it's yours.
The coat of arms (your certificate) is the publicly recognized design on the seal — it proves who the seal belongs to.

If someone breaks the wax and reseals the letter, the new seal won't match the original impression. Similarly, if someone tampers with your app, the digital signature will no longer match, and phones will reject it.

🔑 Key Concepts, One at a Time

🔐 Private Keys and Public Keys

At the heart of app signing is something called public-key cryptography. Don't let that phrase scare you — the idea is simple.

Imagine a special padlock that has two keys:

One key locks the padlock (the private key). Only you have this.
A different key opens it (the public key). You can give this to anyone.

When you sign your app, you use your private key to create a unique "stamp" on it. Anyone can then use the corresponding public key to verify that stamp came from you — without ever learning your private key. Your private key is the crown jewel. Lose it, and you're in serious trouble. Share it, and someone can impersonate you.

🪪 What Is a Certificate?

A certificate is like an ID card for your private key.

Your private key is just a long string of numbers. On its own, it doesn't tell anyone who you are. A certificate wraps that key in identity information — your name, your organization, your email — and gets it stamped by a trusted authority who says, "Yes, we verified this person, and this key belongs to them."

In the real world, this is like a notary public. You don't just take someone's word that a document is legitimate — you want a recognized third party to verify and stamp it.

Apple acts as that trusted authority for iOS apps. Google has a more flexible approach, as we'll see.

🤖 Android App Signing: The Keystore

🏦 What Is a Keystore?

On Android, everything lives in a file called a keystore. Think of a keystore as a safe deposit box at a bank. Inside the box, you store your most important items — in this case, your private keys and certificates.

The keystore file itself is protected by a password (the keystore password), and each individual key inside it also has its own password (the key password). So even if someone steals the keystore file, they can't use it without the passwords.

A keystore contains one or more key entries, and each key entry has:

A private key 🔏 (your secret signing tool)
A certificate 🪪 (your public ID card associated with that key)
An alias 🏷️ (a nickname to identify that particular key inside the safe)

⚙️ How Android Signing Works

When you build your Android app for release, here's what happens behind the scenes:

📦 You build your app into an APK or AAB file (think of this as the "package" of your app).
✍️ The build tool takes your private key from the keystore and uses it to generate a digital signature.
📎 That signature gets attached to the app package.
✅ When Google Play or a user's device receives the app, it checks the signature using the public certificate. If it matches and hasn't been tampered with, the app is trusted.

⚠️ Why the Keystore Is Sacred

Here's the critical thing about Android: Google does not re-sign your app. Once you publish an update to Google Play, every future update must be signed with the exact same key. If you lose your keystore, you literally cannot update your app ever again. You'd have to publish it as a brand new app and ask all your users to reinstall.

This is why many developers have a horror story about losing their keystore. Treat it like a passport 🛂 — make multiple secure backups.

💡 Note: Google Play now offers a feature called Play App Signing, where Google stores a copy of your signing key. This is a safety net — even if you lose your local keystore, Google can still sign your app. It's strongly recommended to opt into this.

🍎 iOS App Signing: A Slightly More Complex World

Apple takes a more hands-on approach to app signing, involving a few more moving parts. But once you understand the pieces, it all makes sense.

📜 Certificates (Again, But Apple's Version)

Just like Android, iOS apps need a certificate. Apple issues two main types:

🛠️ Development Certificate: Used when you're testing the app on your own device. It's like a "work in progress" badge.
🚀 Distribution Certificate: Used when you're ready to publish to the App Store. It's the official, final stamp of approval.

You generate these through Apple's Developer portal. Behind the scenes, you create a private key on your Mac, send a "certificate request" to Apple (which includes your public key), and Apple sends back a signed certificate — your ID card.

🎫 What Is a Provisioning Profile?

This is where Apple gets unique. A provisioning profile is essentially a permission slip that ties several things together:

👤 Who is allowed to sign the app (your certificate)
📱 What app it applies to (identified by a Bundle ID, like com.yourcompany.yourapp)
📍 Where the app can be installed (specific devices, or "any device" for App Store distribution)

Think of a provisioning profile like a backstage pass at a concert 🎵. The pass lists your name (certificate), the event name (your app's Bundle ID), and which venues it's valid for (specific test devices or the App Store). Security at the door (your iPhone or the App Store) checks all three pieces before letting the app in.

There are different types of provisioning profiles:

🛠️ Development: For running the app on your own test devices during development
🧪 Ad Hoc: For distributing the app to a limited set of test devices (like beta testers)
🏪 App Store: For submitting to the App Store
🏢 Enterprise: For distributing internally within a company (requires a special Apple program)

🏷️ The Bundle ID

The Bundle ID is just a unique name for your app, usually written in reverse-domain format: com.yourcompany.yourappname. It's the "ID number" of your app in Apple's system, and it must be unique across all apps on the App Store. Everything in Apple's signing system — certificates, provisioning profiles, push notification configs — gets tied to this ID.

🪜 How iOS Signing Works (Step by Step)

📝 You register your app's Bundle ID in Apple's Developer portal.
📜 You create a Distribution Certificate (Apple gives you this after verifying your identity).
🎫 You create a Provisioning Profile that links your certificate + Bundle ID + distribution target (App Store).
🔨 When you build your app, Xcode uses your private key and provisioning profile to sign it.
☁️ When you upload to App Store Connect, Apple verifies the signature and provisioning profile.
✅ When users download your app, their iPhone checks that everything is in order before running it.

⚖️ Side-by-Side Comparison

Concept	🤖 Android	🍎 iOS
Key storage	Keystore file (.jks or .keystore)	Keychain (on your Mac)
Certificate	Inside the keystore	Issued by Apple, downloaded from Dev portal
"Permission slip"	Not required	Provisioning Profile
App identifier	Application ID (e.g., `com.company.app`)	Bundle ID (same format)
Who signs	You (or Google, via Play App Signing)	You, with Apple's certificate
Lose your key?	Can't update your app	Apple can reissue a new certificate

⚛️ App Signing in React Native with Expo

React Native is a framework for building iOS and Android apps with JavaScript. Expo is a toolset built on top of React Native that makes development much easier — including handling app signing.

😰 The Old Way (Without Expo)

Without Expo, you'd have to:

🤖 Manually generate a keystore for Android
🍎 Manually create certificates and provisioning profiles on Apple's portal
⚙️ Configure your build tools to use all of these
🗂️ Keep track of all these files and passwords yourself

For a new developer, this process was famously painful.

🚀 Enter EAS Build (Expo Application Services)

Expo's answer to this complexity is EAS Build (EAS stands for Expo Application Services). EAS is a cloud build service that can handle the entire signing process for you, including generating and securely storing all your credentials.

Think of EAS like hiring a professional courier service 🚚 instead of delivering packages yourself. You hand them the package (your code), and they handle all the logistics — including the official seals and customs paperwork (signing credentials) — and deliver it to the destination (the app stores).

🤖 How Expo Handles Android Signing

When you run eas build for Android, Expo can:

🔑 Automatically generate a keystore for you if you don't have one.
🔒 Store it securely on Expo's servers, encrypted, so you don't have to worry about losing it.
✍️ Use it to sign every build automatically.

You can also provide your own existing keystore if you prefer to manage it yourself. Either way, Expo's eas.json config file lets you specify how signing should be handled for different environments (development, staging, production).

If you want to keep control yourself but still use EAS, you can run eas credentials to manage your credentials interactively — view what's stored, download your keystore, or replace it.

🍎 How Expo Handles iOS Signing

iOS is more complex, but EAS Build handles it beautifully. When you build for iOS, EAS can:

🔐 Log into your Apple Developer account on your behalf (with your permission and credentials).
📜 Automatically create a Distribution Certificate if you don't have one.
🎫 Automatically create a Provisioning Profile for your app.
💾 Store both securely on Expo's servers.
✍️ Use them to sign your app during the cloud build.

This is genuinely magical ✨ the first time you see it work. What used to take hours of fumbling through Apple's developer portal now happens in a few minutes automatically.

📄 The `eas.json` File

This is the configuration file that tells EAS how to build your app. Here's a simplified example:

{
  "build": {
    "production": {
      "android": {
        "credentialsSource": "remote"
      },
      "ios": {
        "credentialsSource": "remote"
      }
    }
  }
}

credentialsSource: "remote" means "use the credentials stored on Expo's servers." You can also set this to "local" if you want to manage your own keystore and provisioning profile files.

🗺️ The Flow: From Code to App Store with Expo

Here's the full picture of how an Expo app gets signed and submitted:

🤖 For Android:

You run eas build --platform android --profile production
🔑 EAS retrieves your keystore from secure storage (or creates one)
☁️ Your app is built in the cloud and signed with that keystore
📦 You download the signed AAB file (or use eas submit to send it directly to Google Play)

🍎 For iOS:

You run eas build --platform ios --profile production
🎫 EAS logs into Apple, retrieves or creates your certificate and provisioning profile
☁️ Your app is built in the cloud and signed
🚀 You use eas submit to upload the signed IPA directly to App Store Connect

The entire signing and submission pipeline can be automated, meaning once it's set up correctly, publishing an update can be nearly a one-command operation. 🎉

📡 What About Over-the-Air (OTA) Updates?

Expo has another trick: EAS Update, which lets you push JavaScript code updates to users without going through the app store review process. These updates are signed with a different kind of key — a code signing key pair — that ensures the update came from you and wasn't tampered with. The concept is the same (private key signs, public key verifies), just applied to updates instead of the full app binary.

🚨 Common Mistakes and How to Avoid Them

😱 Losing your Android keystore. Back it up in at least two secure locations — a password manager, an encrypted cloud backup, a USB drive in a safe. No exaggeration: losing this file means losing the ability to update your app.

🔀 Using the same certificate for everything. Apple limits the number of active certificates per account. Keep development and distribution certificates separate.

⏰ Letting provisioning profiles expire. Apple provisioning profiles expire after one year. If yours expires, your app won't build. Set a calendar reminder to renew them.

🛡️ Not opting into Play App Signing. Let Google store a backup copy of your Android signing key. It's free insurance.

🙈 Sharing private keys. Never email your keystore or share your private keys. If a team member needs to sign builds, use a signing service (like EAS) rather than passing around key files.

📖 Quick Reference Glossary

🔏 Private Key — Your secret digital stamp. Never share it.

🔓 Public Key — The counterpart to your private key. Anyone can have it; it's used to verify your signature.

🪪 Certificate — An ID card that links your identity to your public key, vouched for by a trusted authority.

🏦 Keystore — An Android-specific file that stores your private keys and certificates in a password-protected container.

🏷️ Bundle ID / Application ID — The unique identifier for your app (e.g., com.yourcompany.appname).

🎫 Provisioning Profile — An iOS-specific "permission slip" that ties together a certificate, an app ID, and the allowed installation targets.

☁️ EAS Build — Expo's cloud build service that automates signing for both Android and iOS.

🛡️ Play App Signing — Google's service to store a backup copy of your Android signing key, protecting you if you lose it locally.

✍️ Code Signing — The overall process of applying a digital signature to software to prove its authenticity and integrity.

🎯 Wrapping Up

App signing sounds intimidating, but at its core it's just a system of trust — making sure that the app users install is genuinely from you, and that no one has messed with it along the way. Android uses a keystore file. iOS uses certificates and provisioning profiles. Both rely on the same underlying idea: a private key you keep secret, and a public key anyone can use to verify your work.

Expo's EAS Build takes most of this complexity off your plate. Instead of manually wrestling with Apple's developer portal or safeguarding your own keystore, EAS can generate, store, and use your credentials automatically — so you can focus on building the app, not the paperwork.

The most important things to remember: 💾 back up your Android keystore, 🙅 don't share private keys, and 🚀 let EAS help you if you're working with React Native and Expo.

Zustand in React Native: A Modern State Management Solution

Suman Bhattarai — Tue, 03 Feb 2026 10:37:07 +0000

Zustand in React Native: A Modern State Management Solution

State management has long been one of the most debated topics in the React ecosystem. While Redux dominated for years, the landscape has evolved significantly. Enter Zustand—a lightweight, flexible state management library that's become increasingly popular in React Native development. In this guide, we'll explore why Zustand might be the perfect fit for your next React Native project.

What is Zustand?

Zustand (German for "state") is a minimalist state management library created by the team behind React Spring. Unlike Redux or MobX, Zustand takes a radically simple approach: it uses hooks and doesn't require providers, actions, or reducers. The entire API can be learned in under 15 minutes, yet it's powerful enough to handle complex application state.

At its core, Zustand creates a store using plain JavaScript functions. The store can be accessed from any component without the need for context providers, making it ideal for React Native's component-based architecture.

Why Zustand for React Native?

React Native developers face unique challenges compared to web developers. App bundle size matters more, performance is critical on resource-constrained devices, and the developer experience needs to be smooth for rapid iteration. Zustand addresses all these concerns:

Tiny Bundle Size: At just 1KB gzipped, Zustand adds negligible overhead to your React Native app. This is crucial when every kilobyte counts toward your app's download size and startup time.

Zero Boilerplate: No providers to wrap your app in, no action creators to write, no complex middleware setup. You create a store, and you're ready to go.

Performance: Zustand only re-renders components that subscribe to changed state slices. This fine-grained reactivity is essential in React Native where rendering performance directly impacts user experience.

TypeScript Support: First-class TypeScript support out of the box, which is increasingly important for maintaining large React Native codebases.

Getting Started with Zustand in React Native

Installation is straightforward. In your React Native project, run:

npm install zustand
# or
yarn add zustand

That's it. No peer dependencies, no additional configuration.

Creating Your First Store

Let's build a practical example—a simple cart store for an e-commerce React Native app:

import { create } from 'zustand';

const useCartStore = create((set, get) => ({
  items: [],
  totalPrice: 0,

  addItem: (product) => set((state) => {
    const existingItem = state.items.find(item => item.id === product.id);

    if (existingItem) {
      return {
        items: state.items.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        ),
        totalPrice: state.totalPrice + product.price
      };
    }

    return {
      items: [...state.items, { ...product, quantity: 1 }],
      totalPrice: state.totalPrice + product.price
    };
  }),

  removeItem: (productId) => set((state) => {
    const item = state.items.find(item => item.id === productId);
    return {
      items: state.items.filter(item => item.id !== productId),
      totalPrice: state.totalPrice - (item.price * item.quantity)
    };
  }),

  clearCart: () => set({ items: [], totalPrice: 0 }),

  getItemCount: () => {
    const state = get();
    return state.items.reduce((count, item) => count + item.quantity, 0);
  }
}));

export default useCartStore;

Using the Store in Components

Consuming state in your React Native components is beautifully simple:

import React from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import useCartStore from './stores/cartStore';

const CartScreen = () => {
  const items = useCartStore((state) => state.items);
  const totalPrice = useCartStore((state) => state.totalPrice);
  const removeItem = useCartStore((state) => state.removeItem);
  const clearCart = useCartStore((state) => state.clearCart);

  return (
    <View>
      <Text style={{ fontSize: 24 }}>
        Total: ${totalPrice.toFixed(2)}
      </Text>

      <FlatList
        data={items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={{ flexDirection: 'row', padding: 10 }}>
            <Text>{item.name} x {item.quantity}</Text>
            <TouchableOpacity onPress={() => removeItem(item.id)}>
              <Text style={{ color: 'red' }}>Remove</Text>
            </TouchableOpacity>
          </View>
        )}
      />

      <TouchableOpacity onPress={clearCart}>
        <Text>Clear Cart</Text>
      </TouchableOpacity>
    </View>
  );
};

Notice how we're selecting specific pieces of state. This is Zustand's selector pattern—components only re-render when the selected state changes, not when any part of the store updates.

Advanced Patterns for React Native

Persisting State with AsyncStorage

React Native apps often need to persist state between sessions. Zustand makes this easy with middleware:

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

const useUserStore = create(
  persist(
    (set) => ({
      user: null,
      theme: 'light',

      setUser: (user) => set({ user }),
      setTheme: (theme) => set({ theme }),
      logout: () => set({ user: null })
    }),
    {
      name: 'user-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

This automatically saves your store to AsyncStorage and rehydrates it on app launch.

Middleware for Side Effects

Zustand supports middleware for logging, devtools, and more:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      // your store
    }),
    { name: 'MyAppStore' }
  )
);

This enables debugging with Redux DevTools, which works seamlessly with React Native Debugger.

Slicing Large Stores

For larger applications, you can split your store into slices:

const createUserSlice = (set) => ({
  user: null,
  setUser: (user) => set({ user }),
});

const createSettingsSlice = (set) => ({
  theme: 'light',
  notifications: true,
  setTheme: (theme) => set({ theme }),
  toggleNotifications: () => set((state) => ({
    notifications: !state.notifications
  })),
});

const useStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createSettingsSlice(...a),
}));

Performance Optimization Tips

While Zustand is fast by default, here are some React Native-specific optimizations:

Use Selectors Wisely: Only subscribe to the state you need. Instead of const state = useCartStore(), use const items = useCartStore((state) => state.items).

Shallow Equality for Objects: When selecting multiple values, use shallow equality:

import { shallow } from 'zustand/shallow';

const { items, totalPrice } = useCartStore(
  (state) => ({ items: state.items, totalPrice: state.totalPrice }),
  shallow
);

Transient Updates: For frequently changing values that don't need to trigger renders (like scroll position), use transient updates:

const useStore = create((set) => ({
  scrollPosition: 0,
  setScrollPosition: (position) => {
    useStore.setState({ scrollPosition: position }, true); // true = skip re-render
  }
}));

Zustand vs. Other Solutions

How does Zustand compare to other state management solutions in React Native?

vs. Redux: Redux requires more boilerplate, uses context (which can impact performance), and has a steeper learning curve. Zustand is simpler and faster, though Redux has a larger ecosystem and more middleware options.

vs. Context API: React Context causes all consumers to re-render when any part of the context changes. Zustand's selector pattern prevents this, making it more performant for frequently updating state.

vs. MobX: MobX is powerful but uses decorators and observables, which can be harder to reason about. Zustand's functional approach is more aligned with modern React patterns.

vs. Recoil/Jotai: These are atom-based solutions that work differently. Zustand's centralized store approach can be simpler for many use cases, though atoms excel at managing independent pieces of state.

Real-World Use Cases in React Native

Zustand shines in several React Native scenarios:

Navigation State: Managing global navigation state without prop drilling
Theme Management: Switching between light/dark modes across the app
Authentication: Storing user tokens and profile data
Offline-First Apps: Combined with AsyncStorage for robust offline support
Real-Time Updates: Managing WebSocket connections and live data
Form State: For complex multi-step forms across screens

Conclusion

Zustand represents a paradigm shift in React Native state management. Its simplicity doesn't mean it's simplistic—it's a thoughtfully designed library that respects the principle of doing one thing well. By eliminating boilerplate and providing excellent performance out of the box, Zustand lets you focus on building features rather than managing infrastructure.

For React Native developers tired of Redux's ceremony or Context's performance issues, Zustand offers a refreshing alternative. Its tiny bundle size, intuitive API, and powerful middleware system make it an excellent choice for apps of any size.

Start small with a single store, and you'll quickly find yourself reaching for Zustand in every new React Native project. The combination of simplicity and power is hard to resist once you've experienced it.

Ready to give it a try? Your next React Native app is waiting for its perfect state management solution.

This blog post is designed for a 5-minute read. For more information, check out the official Zustand documentation and explore the thriving community around this excellent library.

🚀 Understanding JavaScript Async/Await, Promises, and the Event Loop (In the Easiest Way)

Suman Bhattarai — Mon, 26 Jan 2026 02:00:56 +0000

JavaScript is single-threaded, yet it can:

Fetch data from servers
Read files
Handle user clicks
Run timers
Animate UI

All without freezing the browser.

How? Through Promises, async/await, and the Event Loop.

This guide is written to make the “why is my code running out of order?” problem finally click. We’ll cover:

What synchronous vs asynchronous code means
What Promises are (and what they aren’t)
How async/await works under the hood
How the Event Loop decides what runs next
Microtasks vs macrotasks (why Promises often run before timers)
Common mistakes and best practices
Real-world patterns (parallel requests, error handling)

🧠 1) Synchronous vs Asynchronous JavaScript

✅ Synchronous (blocking, predictable order)

console.log("A");
console.log("B");
console.log("C");

Output:

A
B
C

Each line waits for the previous one to finish.

❌ The real world has slow work

Network requests, file reads, databases, timers—these don’t finish instantly. If JavaScript “waited” for them the same way, your app would freeze.

Example:

console.log("Start");

setTimeout(() => {
  console.log("Done");
}, 3000);

console.log("End");

Output:

Start
End
Done

JavaScript doesn’t pause the whole program for setTimeout. It schedules the callback to run later.

Important idea:

Asynchronous code lets JavaScript keep the UI responsive and continue running other tasks while waiting for slow operations.

🌟 2) What is a Promise?

A Promise represents a value you don’t have yet, but will have later (or an error if it fails).

A Promise can be in one of three states:

⏳ Pending: still working
✅ Fulfilled: completed successfully (resolved)
❌ Rejected: failed (rejected)

A simple Promise

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data received!");
  }, 2000);
});

myPromise.then(result => {
  console.log(result);
});

After 2 seconds you’ll see:

Data received!

Resolve vs Reject (success vs failure)

function doWork(success) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (success) resolve("✅ Work succeeded");
      else reject(new Error("❌ Work failed"));
    }, 1000);
  });
}

doWork(true)
  .then(msg => console.log(msg))
  .catch(err => console.log(err.message));

Promise mental model (easy)

Think: “I’ll give you a result later.”
You attach handlers for later using:

.then(...) for success
.catch(...) for errors
.finally(...) for cleanup

🟡 3) Consuming Promises with `.then()` / `.catch()`

Promises are commonly used with .then() and .catch():

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(users => {
    console.log("Users:", users.length);
  })
  .catch(error => {
    console.log("Fetch error:", error);
  });

Why chaining can get messy

This works, but long chains can become harder to read, especially with multiple steps and error handling.

That’s why async/await exists: it’s Promise syntax that reads more like normal code.

✨ 4) `async` / `await` — Promises, but readable

The rules (must know)

async before a function means the function always returns a Promise
await can only be used inside an async function (with some modern exceptions like top-level await in modules)
await pauses only the async function, not the entire program

The same fetch example using async/await

async function getUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  console.log("Users:", users.length);
}

getUsers();

Cleaner, right?

✅ Key: `await` does NOT freeze JavaScript

This example proves it:

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log("1. inside demo: start");
  await wait(2000);
  console.log("3. inside demo: after await");
}

console.log("0. outside: before demo");
demo();
console.log("2. outside: after demo");

Output:

0. outside: before demo
1. inside demo: start
2. outside: after demo
(wait 2 seconds)
3. inside demo: after await

What happened?

The async function demo() paused at await wait(2000)
But the code outside continued running immediately

So no: your entire program does not “get stuck.” Only the async function waits.

🧯 5) Error handling with `try/catch`

With .then() you typically handle errors using .catch().

With async/await, the clean pattern is try/catch:

async function loadUser() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    const user = await res.json();
    console.log("User:", user.name);
  } catch (err) {
    console.log("Failed:", err.message);
  }
}

loadUser();

Tip: Always check res.ok for fetch. Fetch only rejects for network errors; HTTP 404/500 still resolve as responses.

🔄 6) The Event Loop — the “traffic controller” of JavaScript

If JavaScript is single-threaded, how does it handle asynchronous work?

It uses a system involving:

Call Stack (what is running right now)
Web APIs (browser features like timers, network)
Task Queues (where callbacks wait)
Event Loop (moves callbacks onto the stack when ready)

The moving parts (in simple words)

Call Stack: Executes your JS functions line by line.
Web APIs: Handles async operations (timers, fetch, DOM events) outside the stack.
Queues: When async work finishes, callbacks are placed into queues.
Event Loop: When the stack is empty, it pushes queued callbacks back onto the stack to run.

⚡ 7) Microtasks vs Macrotasks (why Promises run before timers)

There are (at least) two important queues:

Microtask Queue — Promise callbacks (.then, await continuation), queueMicrotask, MutationObserver
Macrotask (Task) Queue — setTimeout, setInterval, UI events, message events

Priority rule:

When the call stack becomes empty:

Run all microtasks first (drain microtask queue)
Then run one macrotask
Then microtasks again
Repeat

This is why Promise callbacks often run before setTimeout(..., 0).

Example: Promise vs setTimeout

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

Output:

Start
End
Promise
Timeout

Explanation:

Synchronous logs run first (Start, End)
Promise .then goes to microtask queue
setTimeout callback goes to macrotask queue
Event Loop drains microtasks first → Promise
Then runs timer → Timeout

🧩 8) How `async/await` uses the Event Loop

await is basically syntax sugar for Promise chaining. Internally, code after await becomes a .then(...) continuation (a microtask).

Example:

async function demo() {
  console.log("A");
  await Promise.resolve();
  console.log("B");
}

console.log("C");
demo();
console.log("D");

Output:

C
A
D
B

Why?

demo() starts immediately → prints A
hits await → schedules the rest (console.log("B")) as a microtask
control returns to the main flow → prints D
microtask runs → prints B

🧪 9) A more “realistic” event loop demo

Try predicting the output before reading it:

console.log("1");

setTimeout(() => console.log("2 - timeout"), 0);

Promise.resolve().then(() => console.log("3 - promise"));

(async () => {
  console.log("4 - async start");
  await Promise.resolve();
  console.log("5 - async after await");
})();

console.log("6");

Expected output:

1
4 - async start
6
3 - promise
5 - async after await
2 - timeout

Reason:

Synchronous: 1, 4, 6
Microtasks: promise then (3) and async continuation (5)
Macrotask: timeout (2)

🧰 10) Real-world patterns you should know

✅ Run async tasks in parallel (faster)

Bad (sequential): waits for the first fetch before starting the second:

const a = await fetch(url1);
const b = await fetch(url2);

Good (parallel): start both immediately, wait together:

const [res1, res2] = await Promise.all([
  fetch(url1),
  fetch(url2),
]);

const [data1, data2] = await Promise.all([
  res1.json(),
  res2.json(),
]);

✅ Promise.allSettled (when you want all results, even failures)

const results = await Promise.allSettled([
  fetch(url1),
  fetch("bad-url"),
  fetch(url3),
]);

results.forEach((r, i) => {
  if (r.status === "fulfilled") console.log(i, "ok");
  else console.log(i, "failed:", r.reason);
});

⚠️ 11) Common mistakes (and fixes)

Mistake 1: Using `await` outside `async`

const res = await fetch(url); // ❌ SyntaxError (in most contexts)

Fix:

async function run() {
  const res = await fetch(url);
}

Mistake 2: Forgetting to handle errors

If you don’t catch errors, they become unhandled rejections and can crash Node apps or cause confusing browser console errors.

Fix:

try {
  const res = await fetch(url);
} catch (err) {
  console.log(err);
}

Mistake 3: Assuming fetch rejects on 404/500

Fetch resolves even for many HTTP errors.

Fix:

if (!res.ok) throw new Error(`HTTP ${res.status}`);

Mistake 4: `forEach` + `await` doesn’t do what you think

items.forEach(async item => {
  await doWork(item); // ❌ doesn't wait the way you expect
});

Fix (sequential):

for (const item of items) {
  await doWork(item);
}

Fix (parallel):

await Promise.all(items.map(doWork));

🧾 12) Quick cheat sheet

Promise: future value (resolve/reject)
.then / .catch: handle promise outcome
async: function returns a Promise
await: pause inside that async function until promise resolves
Event Loop: decides what runs next when stack is empty
Microtasks: promises/await continuations (run first)
Macrotasks: timers/events (run after microtasks)

🎯 Conclusion

Once you understand Promises, async/await, and the Event Loop, JavaScript becomes predictable instead of magical.

You’ll debug faster, write cleaner code, and avoid classic async bugs—especially in:

React / React Native
Node.js APIs
Any app that fetches data or handles events

If you remember only one thing:

await pauses only the async function. The event loop keeps JavaScript moving.

Bonus: Interview one-liner

“JavaScript uses the event loop to coordinate asynchronous operations. Promise callbacks and await continuations go into the microtask queue, which runs after the call stack is empty and before macrotask callbacks like setTimeout.”

Expo, EAS, Prebuild, OTA, CI/CD — A Complete Mental Model for Modern React Native Development

Suman Bhattarai — Fri, 23 Jan 2026 18:55:41 +0000

If you used React Native 5–6 years ago, your setup probably looked like this:

React Native CLI
Fastlane for CI/CD
CodePush for OTA updates
Manual signing, scripts, and a lot of DevOps glue

Expo existed back then — but it wasn’t trusted for serious production apps.

Fast forward to today, and the ecosystem looks very different.

Expo is now widely adopted and powers production apps at scale. But the mental model around Expo, EAS Build, Prebuild, Dev Client, OTA updates, and CI/CD is still confusing for many developers.

This post connects all the dots — clearly, practically, and honestly.

The Two Layers of Every Expo App

Every Expo / React Native app has two layers.

1) JavaScript Layer

React components
Business logic
Navigation
API calls
UI
Assets (images, fonts)

This layer can be updated OTA.

2) Native Layer

iOS (Xcode project, Pods, Info.plist)
Android (Gradle, AndroidManifest.xml)
Native SDKs (Firebase, Ads, Payments)

This layer cannot be updated OTA. Any change here requires a new build.

Everything Expo does is about managing the boundary between these two layers.

Expo Go: The Starting Point

Expo Go is a prebuilt app from the App Store / Play Store.

What it does:

Contains a fixed set of native modules
Downloads and runs only your JavaScript code

This is why Expo Go feels magical early on.

But there’s a hard limit:

You can only use native features that Expo Go already includes.

The moment you need:

Firebase
Google Ads
Custom native SDKs

👉 Expo Go is no longer enough.

Development Build (Expo Dev Client): Your Custom Expo Go

A Development Build is:

Your own version of Expo Go, built specifically for your app.

It includes:

Your required native SDKs
Expo dev tools
Live reload
Debug menu
Metro bundler support

Create it with:

eas build --profile development

Run it with:

npx expo start --dev-client

From this point onward, you are no longer limited by Expo Go, but you still enjoy the Expo developer experience.

What Is Expo Prebuild (and Why It Exists)

expo prebuild does one critical thing:

Converts your Expo configuration into real iOS and Android projects.

It generates:

ios/
android/

Based on:

app.json / app.config.js
Installed packages
Config plugins

Prebuild does not mean leaving Expo. It simply makes the native layer visible.

CNG: Continuous Native Generation

Expo’s recommended approach today is CNG.

Native folders are generated artifacts, not the source of truth.

The source of truth should be:

app.json
app.config.js
Config plugins

Benefits of CNG:

Reproducible builds
Easier upgrades
Safe regeneration
Team consistency

If you manually edit native files and rerun prebuild, those changes can be lost. The correct fix is to move those changes into config plugins so they’re reapplied automatically during generation.

EAS Build: CI/CD Without the Pain

The old world of React Native involved:

Fastlane
Ruby scripts
Manual certificate management
Store APIs

Modern Expo replaces that with:

EAS Build
EAS Submit

EAS Build can:

Generate native projects automatically
Build iOS and Android apps
Sign binaries
Produce installable artifacts
Run in the cloud or locally

Cloud Build vs Local Build

Cloud Build	Local Build
Uses Expo servers	Uses your machine
No native folders visible	Native folders visible
Highly reproducible	Environment dependent
CI/CD friendly	Debug friendly

A common misconception is that “EAS Build and Prebuild are the same.” They’re not. Prebuild generates native projects; EAS Build compiles and signs a real app. In cloud builds, EAS may generate native projects behind the scenes during the build step.

Debug APK vs Development Build

These are often confused but not the same.

Debug APK (from local run)

If you do local development with prebuild + run, like:

npx expo prebuild
npx expo run:android

You’ll get a debug build (for example a debug APK on Android). It is:

Built locally
Signed with the debug keystore
Installed directly on device/emulator
Not meant for sharing
Not store-safe

Development Build (EAS)

A development build produced by EAS is:

Properly signed
Shareable with testers
CI/CD friendly
Behaves closer to a real distribution build
Still supports dev tools and Metro

They may feel similar in day-to-day usage (both connect to Metro, both support dev menu), but the pipeline and signing model are different.

OTA Updates: Expo Updates vs CodePush

Expo provides OTA updates through expo-updates (the module inside your app) plus the EAS Update service (the server side).

expo-updates (the engine)

Native module inside your app
Downloads JavaScript updates
Applies them safely
Uses runtimeVersion to prevent incompatible updates

Publishing updates

Older Expo workflows used expo publish, but modern Expo uses EAS Update, typically:

eas update

OTA updates can change

✅ UI
✅ Business logic
✅ Bug fixes
✅ Assets

OTA updates cannot change

❌ Native code
❌ Permissions
❌ Native SDKs

If native changes are required, a new build is mandatory.

Channels: Controlled Rollouts

Channels decide who receives an update.

Typical channels:

development
preview
production

Publishing to a channel looks like:

eas update --channel production --message "Fix login bug"

Only builds that are configured to listen to production will receive it.

Channels enable:

Staged rollouts
QA validation
Emergency hotfixes
Safe experimentation

EAS Update History & Rollbacks

You can inspect update history from the CLI:

eas update:list
eas channel:list
eas channel:view production

Note: if you haven’t published any updates yet, listing may show no branches/history. Publishing your first update creates the history.

Why Fastlane & CodePush Faded Away

They didn’t disappear because they were bad. They faded because Expo productized the same ideas.

Legacy Tool	Expo Equivalent
Fastlane	EAS Build / Submit
CodePush	EAS Update (expo-updates + hosted updates)

Same concepts — more integrated developer experience.

When Expo Is Not Enough

Expo may not be ideal if:

You rely on heavy custom native SDKs
You are building games or AR engines
You need deep custom native UI frameworks

Even then, you can often start with Expo, use prebuild, and gradually move closer to bare React Native. Expo is a spectrum, not a lock-in.

Final Mental Model

Expo Go → run JavaScript only
Development Build → your custom Expo Go with your native SDKs
Prebuild → generate native projects (ios/android)
CNG → config is the source of truth; native folders can be regenerated
EAS Build → CI/CD and signing
EAS Update → OTA JavaScript updates

Once this clicks, Expo stops being magic — and becomes predictable engineering.

Closing Thoughts

Expo today is not a beginner tool. It is a modern mobile platform that:

abstracts DevOps
preserves flexibility
scales to production
respects native boundaries

Understanding the architecture lets you confidently decide:

when to rebuild
when to ship OTA
when to prebuild
when to go bare

That’s the difference between using Expo and engineering with Expo.

🚀 Mastering Git Best Practices: Clean Workflow for Modern Development

Suman Bhattarai — Tue, 29 Apr 2025 00:54:01 +0000

Git is the backbone of almost every modern development workflow.

Yet, many projects suffer from messy commit histories, confusing branches, and lost productivity — simply because of poor Git practices.

In this guide, we'll walk through the best Git practices for cleaner, professional development, with examples from real-world mobile app projects.

📂 1. Branching Strategy: Structure Matters

A clear branching model is crucial to avoid chaos when features, bug fixes, and releases are happening simultaneously.

Here’s a simple and effective structure:

Branch	Purpose
`main`	Always production-ready
`develop`	Integration branch for features
`feature/`	For building new features
`fix/`	For fixing bugs
`chore/`	Maintenance tasks like refactoring or dependency updates

✅ Example

If you are adding a new dark mode toggle feature in a mobile app:

git checkout -b feature/dark-mode-toggle

Fixing a crash when opening the Profile Screen:

git checkout -b fix/profile-screen-crash

📝 2. Writing Great Git Commit Messages

Good commit messages tell a story of your project.

Use the Conventional Commits format to make your messages clear, structured, and machine-readable.

Format:

<type>: <short description>

Where <type> can be:

feat: New feature
fix: Bug fix
docs: Documentation changes
style: Code formatting, no logic change
refactor: Code refactoring without changing behavior
test: Adding or fixing tests
chore: Maintenance tasks (build, configs)

✅ Good Examples

git commit -m 'feat: add dark mode support'

git commit -m 'fix: correct crash when navigating to ProfileScreen'

git commit -m 'chore: update React Native to 0.73'

Tip:

Always use imperative mood (like "fix bug" instead of "fixed bug") for consistency.

📚 3. Keep Commits Small and Focused

One commit = one logical change.

Avoid large "everything-in-one" commits.

Instead, commit after each meaningful change.

✅ Example

Bad (everything together):

git commit -m 'add profile screen, fix header bug, update navigation'

Good (separate commits):

git commit -m 'feat: create basic ProfileScreen component'
git commit -m 'fix: resolve header navigation bug'
git commit -m 'chore: update navigation library to latest version'

🚀 4. Pull Requests: Reviewable and Ready

Before merging into develop or main, always open a pull request (PR).

A great PR should:

Have a clear title and description
Link to related tasks/issues
Be small and focused (easier to review)

✅ Example PR title:

feat: implement dark mode toggle

PR Description Template:

What this PR does:

Adds a dark mode toggle in the settings page.

Testing Steps:

Open the app.

Go to Settings → Appearance.

Toggle dark mode on/off.

🧹 5. Clean Up After Merging

Once your branch is merged into develop or main, delete it from the remote repository.

git push origin --delete feature/dark-mode-toggle

This keeps your repository clean and avoids abandoned branches piling up.

✨ Bonus Tips for Professional Git Workflow

Sync often: Before pushing, run

  git pull --rebase origin develop

to avoid unnecessary merge commits.

Use Draft PRs: If your code isn’t fully ready but you want early feedback.
Squash commits: When merging, use "Squash and Merge" to combine multiple small commits into one clean commit on the main branch.
Tag releases: Use Git tags to mark production releases.

  git tag -a v1.0.0 -m "First stable release"
  git push origin v1.0.0

Automate checks: Add tools like ESLint, Prettier, and testing pipelines so that your PRs are automatically validated.

🎯 Final Thoughts

Mastering Git is not about memorizing commands — it's about building habits that lead to clean codebases, happy teams, and faster releases.

By following these best practices, your projects — whether solo or team-based — will scale more smoothly, avoid technical debt, and stay professional.

Start small, structure your branches, write clear commits, open reviewable PRs — and watch your productivity soar 🚀.

🚀 Enhancing Development Efficiency with VS Code Snippets: A React Native Example Using TypeScript

Suman Bhattarai — Mon, 07 Apr 2025 00:32:51 +0000

As developers, we often find ourselves repeating the same boilerplate code across projects. Whether it's creating React Native components, defining stylesheets, or structuring API services, these repetitive tasks can slow down productivity. But don’t worry — Visual Studio Code (VS Code) has a powerful feature called code snippets that can automate these common code patterns, saving you valuable time and effort. In this blog post, we’ll explore how to create and use custom snippets to streamline React Native development in TypeScript, with examples for .tsx components and .ts stylesheets. 📝

What Are VS Code Snippets? 🤔

Code snippets are reusable blocks of code that you can easily insert into your files using a simple keyword or prefix. They help reduce typing effort, minimize errors, and ensure consistency across projects. VS Code allows you to create custom snippets tailored to your specific workflow, whether for a specific language (like TypeScript) or globally.

Key Benefits of Using Snippets:

⚡ Faster Development: Avoid rewriting repetitive code.
🧑‍🤝‍🧑 Consistency: Enforce team-wide coding standards.
✂️ Reduced Errors: Eliminate typos in boilerplate code.
🧠 Focus on Logic: Spend less time on structure and more on solving unique problems.

Creating Custom Snippets in VS Code

Let’s dive into how to set up custom code snippets in VS Code. Follow these easy steps!

Step 1: Accessing Snippet Settings

Open VS Code.
Navigate to File > Preferences > Configure User Snippets (or press Ctrl+Shift+P and search for "Preferences: Configure User Snippets").
Select either a New Global Snippets File or a language-specific file (for example, typescriptreact.json for React/TypeScript files).

Step 2: Snippet Syntax 🛠️

Snippets are defined in a JSON format with three main properties:

prefix: The keyword that triggers the snippet.
body: The code template (supports multiline and placeholders like $1, $2).
description: A brief explanation of the snippet.

Example 1: React Native Component Snippet (.tsx) ⚛️

Here’s how you can create a snippet to generate a functional React Native component with TypeScript.

Use Case:

A typical React Native component includes:

Import statements for React and React Native.
A typed Props interface.
A functional component with a StyleSheet.
An export statement.

Snippet Code:

{
  "Functional React Native Component": {
    "prefix": "rnfc",
    "body": [
      "import React from 'react';",
      "import { View, Text, StyleSheet } from 'react-native';",
      "",
      "interface ${1:ComponentName}Props {",
      "  // Define props here",
      "}",
      "",
      "const ${1:ComponentName} = ({}: ${1:ComponentName}Props) => {",
      "  return (",
      "    <View style={styles.container}>",
      "      <Text>${1:ComponentName}</Text>",
      "    </View>",
      "  );",
      "};",
      "",
      "const styles = StyleSheet.create({",
      "  container: {",
      "    flex: 1,",
      "    padding: 16,",
      "  },",
      "});",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "Create a React Native functional component with TypeScript."
  }
}

How to Use:

Type rnfc in a .tsx file.
Press Tab to expand the snippet.
The cursor jumps to the component name ($1), allowing you to rename it everywhere simultaneously. 🔄

Example 2: React Native Stylesheet Snippet (.ts) 🎨

In React Native, it's common practice to separate styles into their own dedicated files. Let’s create a snippet for defining stylesheets.

Use Case:

A stylesheet file typically includes:

An import for StyleSheet.
A typed Styles object.
Common style patterns (e.g., flex, padding, fonts).

Snippet Code:

{
  "React Native Stylesheet": {
    "prefix": "rnstyles",
    "body": [
      "import { StyleSheet } from 'react-native';",
      "",
      "export const styles = StyleSheet.create({",
      "  container: {",
      "    flex: 1,",
      "    padding: 16,",
      "    backgroundColor: '#FFFFFF',",
      "  },",
      "  text: {",
      "    fontSize: 16,",
      "    fontWeight: '500',",
      "  },",
      "  // Add more styles here",
      "});"
    ],
    "description": "Create a React Native StyleSheet with common styles."
  }
}

How to Use:

Type rnstyles in a .ts file.
Press Tab to insert the stylesheet template.
Modify or add styles as needed. ✨

Best Practices for Snippets 📝

Keep Snippets Concise: Focus on repetitive patterns, not entire files.
Use Placeholders: Mark areas for customization (e.g., $1, $2).
Organize by Language: Use language-specific snippet files (e.g., typescriptreact.json for .tsx files).
Share Snippets: Sync them across teams using VS Code settings or extensions like Settings Sync.

Advanced Tips 🔧

1. Dynamic Variables

Use VS Code’s built-in variables for dynamic content:

$TM_FILENAME_BASE: Inserts the current filename.
$CURRENT_YEAR: Adds the current year.

Example:

"header": {
  "prefix": "header",
  "body": [
    "// Author: Your Name",
    "// Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE"
  ]
}

2. Multi-Cursor Navigation

Use $1, $2 to guide the cursor through editable fields. Press Tab to jump between them.

3. Snippet Extensions

Explore extensions like ES7+ React/Redux/React-Native Snippets for pre-built templates.

Conclusion

Custom VS Code snippets are a game-changer for React Native developers working with TypeScript. By automating repetitive boilerplate code for components and stylesheets, you can focus on solving unique challenges instead of rewriting the same structures again and again. 🏆

Try It Yourself:

Open your VS Code snippet settings.
Add the examples shared above.
Experiment with creating snippets for hooks, navigation components, or API services.

Happy coding! 🎉

🚀 Enhancing Your React Native Codebase: Best Practices & Modern Tooling

Suman Bhattarai — Thu, 03 Apr 2025 19:35:21 +0000

React Native ⚛️ is a powerful framework for building cross-platform mobile apps, but as projects grow, maintaining code quality, scalability, and collaboration becomes challenging. In this guide, we’ll explore tools and strategies to elevate your React Native codebase, including Prettier, TypeScript, ESLint, module resolvers, and more.

✨ 1. Code Formatting with Prettier

Consistent code formatting improves readability and reduces merge conflicts. Prettier automates this process by enforcing a uniform style across your codebase.

🔧 Setup:

Install dependencies:

   npm install --save-dev prettier

Create a .prettierrc configuration file:

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 80
   }

Add a script to your package.json:

   "scripts": {
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\""
   }

Run the following command to format all files:

   npm run format

💡 Pro Tip: Integrate Prettier with your IDE for real-time formatting.

🔒 2. Type Safety with TypeScript

TypeScript catches errors at compile time, provides better autocompletion, and makes refactoring safer.

🚀 Migration Steps:

Install TypeScript and necessary types:

   npm install --save-dev typescript @types/react @types/react-native

Create a tsconfig.json:

   {
     "compilerOptions": {
       "allowJs": true,
       "esModuleInterop": true,
       "jsx": "react-native",
       "lib": ["esnext"],
       "moduleResolution": "node",
       "strict": true,
       "baseUrl": "./src",
       "paths": {
         "@components/*": ["components/*"]
       }
     },
     "exclude": ["node_modules"]
   }

Rename .js files to .tsx incrementally and fix type errors.

📌 Example: Typed Component

interface ButtonProps {
  title: "string;"
  onPress: () => void;
}

const Button = ({ title, onPress }: ButtonProps) => (
  <TouchableOpacity onPress={onPress}>
    <Text>{title}</Text>
  </TouchableOpacity>
);

🚨 3. Linting with ESLint

ESLint identifies problematic patterns in your code. For TypeScript projects, combine it with @typescript-eslint.

🛠️ Configuration:

Install dependencies:

   npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-native

Create .eslintrc.js:

   module.exports = {
     root: true,
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended',
       'plugin:react/recommended',
       'plugin:react-native/all',
     ],
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint', 'react', 'react-native'],
     rules: {
       'react-native/no-raw-text': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',
     },
     settings: {
       react: { version: 'detect' },
     },
   };

Add a lint script:

   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\""
   }

🏗️ 4. Clean Imports with Module Resolver

Avoid messy relative paths like ../../../components/Button using babel-plugin-module-resolver.

🔧 Setup:

Install the plugin:

   npm install --save-dev babel-plugin-module-resolver

Update babel.config.js:

   module.exports = {
     plugins: [
       [
         'module-resolver',
         {
           root: ['./src'],
           alias: {
             '@components': './src/components',
             '@utils': './src/utils',
           },
         },
       ],
     ],
   };

Update tsconfig.json:

   {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         "@components/*": ["components/*"],
         "@utils/*": ["utils/*"]
       }
     }
   }

Use clean imports:

   import Button from '@components/Button';

🤖 5. Automate Workflows with Git Hooks

Enforce code quality pre-commit with Husky and lint-staged.

🚀 Setup:

Install dependencies:

   npm install --save-dev husky lint-staged

Configure Husky in package.json:

   "scripts": {
     "prepare": "husky install"
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "eslint --fix",
       "prettier --write",
       "git add"
     ]
   }

Create a pre-commit hook:

   npx husky add .husky/pre-commit "npx lint-staged"

🏆 Additional Best Practices

📁 A. Directory Structure

Organize files by feature or domain:

assets/
src/
  ├── components/
  ├── screens/
  ├── utils/
  ├── hooks/
  └── store/

🧪 B. Testing

Add Jest for unit tests and Detox for E2E testing:

npm install --save-dev jest @testing-library/react-native detox

🔥 C. Monitoring

Integrate tools like Sentry or Firebase Crashlytics to track runtime errors.

🎯 Conclusion

By integrating these tools and best practices, your React Native codebase becomes:
✅ Consistent with Prettier

✅ Type-safe with TypeScript

✅ Error-resistant with ESLint

✅ Maintainable with module resolvers

✅ Automated via Git hooks

Start incrementally—even small improvements can yield immediate benefits. Over time, these changes will reduce technical debt, streamline collaboration, and make your app more robust. Happy coding! 🚀

📜 The History of JavaScript: From Netscape to Modern Web Development

Suman Bhattarai — Sat, 29 Mar 2025 20:38:33 +0000

JavaScript is one of the most influential programming languages in web development. From its rushed beginnings in the mid-1990s to its dominance in modern web applications, JavaScript has evolved significantly.

🚀 The Birth of JavaScript (1995)

Invented by: Brendan Eich at Netscape
Original name: Mocha (later renamed to LiveScript, then JavaScript)
Purpose: To make web pages interactive by enabling dynamic content and client-side scripting
Development time: Just 10 days

At the time, Netscape wanted a lightweight scripting language that could be embedded in web browsers. Brendan Eich designed JavaScript to be easy to use while taking inspiration from Java, Scheme, and Self.

Did JavaScript Copy Java? 🤔

No! Despite the name, JavaScript is not related to Java. The name was a marketing strategy by Netscape to ride the popularity of Java.

🌍 Standardization & ECMAScript (1996-1999)

Microsoft copied JavaScript and introduced JScript in Internet Explorer.
To avoid fragmentation, JavaScript was standardized under ECMAScript by ECMA International in 1997.
The ECMAScript 3 (1999) version became widely adopted and set the foundation for modern JavaScript.

Fun Fact: ECMAScript is the official name, but everyone still calls it JavaScript!

📉 The Dark Ages (2000-2004)

JavaScript was widely used but had poor performance and browser inconsistencies.
Developers mostly relied on Flash and Java Applets for rich web applications.
JavaScript was often seen as a "toy language."

🚀 The Rise of AJAX & Web 2.0 (2005-2009)

AJAX (Asynchronous JavaScript and XML) revolutionized web development by enabling dynamic, real-time content updates without refreshing the page.
This led to the rise of Web 2.0 applications like Google Maps, Gmail, and Facebook using JavaScript extensively.
JavaScript frameworks like jQuery (2006) made development easier by abstracting browser differences.

⚡ The Modern JavaScript Era (2009-Present)

1️⃣ V8 Engine & Node.js (2009)

Google released the V8 JavaScript engine, which made JavaScript much faster.
Node.js (built on V8) allowed JavaScript to run on servers, making it a full-stack language.

2️⃣ ECMAScript 6 (2015) – The Big Update

ES6 (ECMAScript 2015) introduced:
- let & const (better variable management)
- Arrow functions (() => {})
- Classes & Modules
- Template literals (`Hello, ${name}!`)
This was the biggest improvement since ES3 and made JavaScript more powerful.

3️⃣ Rise of Frameworks & Libraries (2010-Present)

React.js (2013) → Component-based UI development
Vue.js (2014) → Lightweight & beginner-friendly framework
Angular (2016) → Enterprise-level SPA framework

4️⃣ JavaScript Everywhere (2020s & Beyond)

Full-stack JavaScript with frameworks like Next.js and Nest.js.
Serverless & Cloud computing using JavaScript (AWS Lambda, Firebase).
Machine Learning & AI with JavaScript (TensorFlow.js).
Mobile Application Development with React Native, enabling JavaScript to power iOS and Android apps.
WebAssembly (WASM) is extending JavaScript’s capabilities for high-performance apps.

🎯 Conclusion

JavaScript has evolved from a simple browser scripting language into a powerful, full-stack programming language that powers the modern web. With continuous updates, JavaScript remains one of the most versatile and in-demand languages in the world. 🚀

👉 Fun Fact: JavaScript is the #1 most popular programming language on GitHub every year! 😎

Why Do Arrays Start at Index 0? 🤔

Suman Bhattarai — Fri, 28 Mar 2025 21:11:44 +0000

If you’ve ever worked with programming languages like C, Java, Python, or JavaScript, you might have noticed one thing—arrays always start at index 0. But why? Wouldn’t it be more natural to start counting from 1, just like we do in real life? 🤯

It turns out, there’s a very logical reason behind this. In this post, we’ll break it down in super simple terms with real-life examples and code snippets!

🔍 The Quick Answer: It’s All About Memory!

Arrays are stored in contiguous (continuous) memory locations. When you access an element in an array, the computer calculates its memory address like this:

Address = Base Address + (Index * Size of Each Element)

If we start counting from 0, the first element’s memory address is simply the base address, making calculations faster and more efficient.

Now, let’s break it down further. 🚀

🏗️ How Arrays Work in Memory

Imagine you have an array of 4 integers, and each integer takes 4 bytes in memory.

int numbers[4] = {10, 20, 30, 40};

Let’s assume this array starts at memory address 1000. Here’s how the elements are stored:

Index	Element	Memory Address
0	10	1000
1	20	1004
2	30	1008
3	40	1012

When you access numbers[0], the calculation is:

1000 + (0 * 4) = 1000  ✅

For numbers[1], it’s:

1000 + (1 * 4) = 1004 ✅

Now, imagine if the index started at 1 instead of 0. Then we’d have to adjust the calculation every time by subtracting 1 from the index:

1000 + ((index - 1) * 4)

This extra subtraction step wastes time and computation. That’s why computer scientists prefer zero-based indexing—it’s cleaner and faster! ⚡

⏳ Historical Reasons: Blame C and Assembly! 😆

The zero-based indexing convention dates back to C programming language and Assembly language. C was designed to work closely with low-level memory operations, and Assembly already used zero-based addressing. Since many modern languages like Python, JavaScript, Java, and Swift were inspired by C, they inherited this tradition!

"The elegance of zero-based indexing lies in its direct mapping to memory."
– Edsger Dijkstra, Computer Scientist 💡

Some older languages, like Fortran and Lua, use 1-based indexing, but they are exceptions.

🧠 Real-Life Analogy: Elevators vs. Arrays 🚀

Think of an elevator in a building. In some countries, the ground floor is labeled as 0, while in others, it’s labeled as 1.

Zero-based indexing is like calling the ground floor 0 because it aligns better with the actual floor count.
One-based indexing is like calling the ground floor 1, which feels more natural to humans but adds complexity in calculations.

Computers prefer the most efficient way—hence, zero-based indexing wins! 🏆

🏁 Conclusion: Zero is the Hero! 🎯

To recap:
✅ Zero-based indexing is faster because it maps directly to memory.
✅ It avoids extra computations like subtracting 1 from every index.
✅ It follows the legacy of C and Assembly, which shaped modern programming languages.
✅ It makes looping easier (e.g., for(int i = 0; i < size; i++) works perfectly!).

While 1-based indexing might feel more natural to humans, zero-based indexing is natural for computers—and that’s what really matters! 💻

What do you think? Should programming languages allow both? Let me know in the comments! 😊

🚀 Mastering React Hooks: The Ultimate Guide (With Examples!)

Suman Bhattarai — Thu, 13 Mar 2025 01:13:05 +0000

React Hooks have revolutionized how we write functional components, eliminating the need for class components while making state management and side effects more intuitive. In this guide, we'll explore all React Hooks, including the latest ones, with examples to help you integrate them effectively into your projects. 🎯

📌 What Are React Hooks?

React Hooks are built-in functions that allow functional components to use state and lifecycle features without converting them into class components. They make React code cleaner, reusable, and easier to test. 🎉

🏆 Essential React Hooks

1️⃣ useState - Manage Component State 🏗️

The useState hook allows you to manage local state inside functional components.

import React, { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

2️⃣ useEffect - Handle Side Effects ⚡

The useEffect hook is used for side effects such as fetching data, subscriptions, or updating the DOM.

import React, { useState, useEffect } from "react";

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Elapsed time: {seconds}s</p>;
};

3️⃣ useContext - Share State Globally 🌍

The useContext hook provides a way to consume context in functional components without prop drilling.

import React, { createContext, useContext } from "react";

const ThemeContext = createContext("light");

const ThemeSwitcher = () => {
  const theme = useContext(ThemeContext);
  return <p>Current theme: {theme}</p>;
};

const App = () => (
  <ThemeContext.Provider value="dark">
    <ThemeSwitcher />
  </ThemeContext.Provider>
);

🎯 Advanced React Hooks

4️⃣ useReducer - Manage Complex State 🏗️

The useReducer hook is an alternative to useState, useful for managing complex state logic.

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
};

5️⃣ useRef - Access DOM Elements 📌

The useRef hook creates a mutable reference that persists across renders. It's commonly used to access DOM elements directly.

import React, { useRef } from "react";

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

6️⃣ useMemo - Optimize Performance 🚀

The useMemo hook memoizes a computed value, preventing unnecessary recalculations.

import React, { useState, useMemo } from "react";

const ExpensiveCalculation = ({ num }) => {
  const computedValue = useMemo(() => {
    return num * 2; // Simulating heavy computation
  }, [num]);

  return <p>Computed Value: {computedValue}</p>;
};

7️⃣ useCallback - Optimize Functions 📌

The useCallback hook memoizes functions to prevent unnecessary re-renders.

import React, { useState, useCallback } from "react";

const Button = React.memo(({ handleClick }) => {
  console.log("Button re-rendered");
  return <button onClick={handleClick}>Click Me</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Count: {count}</p>
      <Button handleClick={increment} />
    </div>
  );
};

🔥 Newest React Hooks (React 18+)

8️⃣ useId - Unique IDs 🆔

useId generates unique IDs for accessibility attributes.

import { useId } from "react";

const Form = () => {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Enter Name:</label>
      <input id={id} type="text" />
    </div>
  );
};

🎯 Conclusion

React Hooks provide powerful capabilities to manage state, optimize performance, and handle side effects in functional components. By leveraging hooks like useState, useEffect, useMemo, and useCallback, you can write more efficient and maintainable React applications! 🚀🔥

Which React Hook do you use the most? Let me know in the comments! 💬

📝 Happy Coding! 🎉

🚀 Ultimate Git Cheatsheet: Your Go-To Guide for Version Control

Suman Bhattarai — Tue, 11 Mar 2025 09:05:18 +0000

Git is an essential tool for developers, enabling seamless version control and collaboration. Whether you're a beginner or a seasoned pro, this Git cheatsheet will help you navigate through essential commands with ease! 💡

📌 Table of Contents

Getting Started with Git
Basic Git Commands
Branching and Merging
Working with Remote Repositories
Viewing History and Tracking Changes
Advanced Git Commands
Best Practices & Pro Tips

🏁 Getting Started with Git

✅ Install Git

Download and install Git from git-scm.com, then verify the installation:

git --version

🎯 Initialize a Repository

git init

Creates a new Git repository in the current directory.

📥 Clone an Existing Repository

git clone <repository-url>

Copies a remote repository to your local machine.

🔥 Basic Git Commands

🧐 Check Repository Status

git status

Shows the current state of your working directory.

📌 Stage Changes

git add <file>
git add .

Adds files to the staging area (. stages all changes).

✅ Commit Changes

git commit -m "Descriptive commit message"

Saves the staged changes to your local repository.

🛠️ Modify Last Commit

git commit --amend -m "Updated commit message"

Allows you to edit the last commit (only use before pushing!).

🌿 Branching and Merging

🌱 Create a New Branch

git branch <branch-name>

Creates a new branch.

🔄 Switch Branches

git checkout <branch-name>

Switches to the specified branch. Alternatively, use:

git switch <branch-name>

🚀 Create and Switch in One Step

git checkout -b <branch-name>

Creates and switches to a new branch.

🔗 Merge Branches

git merge <branch-name>

Integrates changes from the specified branch into the current branch.

🗑️ Delete a Branch

git branch -d <branch-name>

Deletes a branch that has been merged. Use -D to force delete.

🌎 Working with Remote Repositories

🔍 View Remote Repositories

git remote -v

Lists the remote repositories linked to your project.

🔗 Add a Remote Repository

git remote add origin <repository-url>

Links a local repo to a remote server.

🔄 Fetch Updates

git fetch origin

Retrieves changes from the remote without merging.

⬇️ Pull Changes

git pull origin <branch-name>

Updates your local branch with remote changes.

⬆️ Push Changes

git push origin <branch-name>

Uploads your commits to the remote repository.

📜 Viewing History and Tracking Changes

📚 View Commit History

git log

Displays the commit history. Use:

git log --oneline --graph --decorate

for a compact view.

🔍 Show Specific Commit Details

git show <commit-hash>

Displays details of a particular commit.

🔬 Compare Changes

git diff

Shows differences between working directory and staged files.

📌 Stash Changes Temporarily

git stash
git stash pop

Saves unfinished work without committing and restores it later.

🛠️ Advanced Git Commands

🧹 Rebase (Reapply Commits)

git rebase <branch-name>

Reapplies commits on top of another base.

🔄 Reset to a Previous Commit

git reset --soft <commit-hash>
git reset --hard <commit-hash>

--soft keeps changes staged, --hard erases them.

⏪ Revert a Commit

git revert <commit-hash>

Creates a new commit that undoes a previous commit.

🍒 Cherry-Pick Specific Commits

git cherry-pick <commit-hash>

Applies a specific commit from another branch.

🎯 Best Practices & Pro Tips

✅ Commit Often & Use Meaningful Messages 📌

✅ Use Feature Branches for New Changes 🌿

✅ Regularly Sync with Remote (git pull) 🔄

✅ Resolve Merge Conflicts Carefully 🤝

✅ Keep Your Repository Clean & Organized 🧹

🏁 Conclusion

Mastering Git is essential for efficient software development. This Git cheatsheet serves as a quick reference for everyday commands and best practices. Keep practicing, experiment with different commands, and soon you'll be a Git expert! 🚀

Happy coding! 👨‍💻✨

Why Redux Toolkit Outshines Traditional Redux for Modern State Management? 🚀

Suman Bhattarai — Mon, 10 Mar 2025 08:25:35 +0000

Managing state in complex web applications can be challenging, and while traditional Redux has been a trusted solution for years, it often comes with cumbersome boilerplate, intricate setup, and a steep learning curve. Enter Redux Toolkit (RTK)—the official, opinionated toolset designed to streamline Redux development and elevate your coding experience. In this post, we’ll dive into how RTK tackles common pain points and why it’s the SEO-friendly, modern choice for state management in today’s web apps.

1. Eliminate Boilerplate and Write Less Code ✂️

Traditional Redux requires manually defining action types, creators, reducers, and middleware. This not only leads to repetitive code but can also slow down your development process. Consider the typical Redux setup:

// Action types
const INCREMENT = 'counter/INCREMENT';

// Action creator
const increment = () => ({ type: INCREMENT });

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    default:
      return state;
  }
};

// Store setup
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(counterReducer, applyMiddleware(thunk));

With RTK, the createSlice function automatically generates action types and creators, while configureStore simplifies store configuration:

import { createSlice, configureStore } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

const store = configureStore({
  reducer: counterSlice.reducer,
});

// Auto-generated action creator: counterSlice.actions.increment

Outcome: Enjoy up to 50% less code with no manual type definitions or complex switch statements—making your development faster and more enjoyable.

2. Simplify Immutable Updates with Immer 💡

Handling immutable state updates in traditional Redux can be error-prone, requiring careful use of spread operators and nested object copying:

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text, completed: false }];
    case 'TOGGLE_TODO':
      return state.map((todo, index) =>
        index === action.index ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};

RTK leverages Immer under the hood, letting you write "mutating" logic safely:

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ text: action.payload, completed: false });
    },
    toggleTodo: (state, action) => {
      const todo = state[action.payload];
      todo.completed = !todo.completed;
    },
  },
});

Outcome: Cleaner code with fewer bugs, improved readability, and no more convoluted nested spreads.

3. Embrace Best Practices with Built-in Defaults ✔️

RTK not only reduces boilerplate but also promotes industry best practices through its built-in features:

configureStore: Automatically integrates Redux DevTools, includes redux-thunk for async logic, and applies essential middleware like serializability checks.
createAsyncThunk: Simplifies asynchronous actions (e.g., API calls) by auto-generating pending, fulfilled, and rejected action types.
Normalization Utilities: Tools like createEntityAdapter help manage normalized state for high-performance applications.

For example, handling asynchronous operations becomes seamless:

const fetchUser = createAsyncThunk('user/fetch', async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  return response.data();
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.data = action.payload;
        state.loading = false;
      });
  },
});

Outcome: RTK enforces conventions that result in more maintainable and robust code, perfect for scaling your web applications.

4. A Superior Developer Experience 🌟

RTK is built to make your life easier as a developer:

TypeScript Integration: Enjoy robust type safety from day one with RTK’s built-in TypeScript support.
Optimized Performance: Utilize built-in Reselect utilities like createSelector for efficient, memoized selectors.
Modular Code Organization: The slice pattern encourages organizing code by feature rather than scattering actions and reducers.

Outcome: Increased productivity, fewer bugs, and a more intuitive codebase.

5. Trusted by Industry Leaders and the Community 🤝

The Redux team recommends RTK as the default way to write Redux code, and it’s already powering major projects at companies like Facebook, Google, and Amazon. Migrating from traditional Redux is straightforward, and RTK integrates seamlessly with existing codebases.

Outcome: Join a growing community of developers who have embraced RTK for its efficiency, reliability, and ease-of-use.

When Might You Not Need RTK?

While RTK is a fantastic tool, it may not be necessary for every project:

Small-Scale Apps: For simple state management needs, consider using React’s Context API or lightweight libraries like Zustand.
Legacy Codebases: Migrating large, established Redux projects might require extra effort.

Conclusion

Redux Toolkit is more than just a convenience—it’s a paradigm shift for modern web application development. By eliminating boilerplate, simplifying immutable updates with Immer, and embedding best practices throughout, RTK streamlines state management and improves your overall development experience. Whether you’re starting a new project or refactoring an existing one, give Redux Toolkit a try and experience the future of Redux for yourself! 🚀

Resources:

Feel free to leave your thoughts and experiences in the comments below—let’s discuss how RTK has transformed your Redux workflow! 😊

Forem: Suman Bhattarai

App Signing Explained 📱: Keystores, Certificates, and Provisioning Profiles

📱 App Signing Explained: Keystores, Certificates, and Provisioning Profiles (Without the Headache)

🤔 Why Does App Signing Even Exist?

🕯️ The Wax Seal Analogy

🔑 Key Concepts, One at a Time

🔐 Private Keys and Public Keys

🪪 What Is a Certificate?

🤖 Android App Signing: The Keystore

🏦 What Is a Keystore?

⚙️ How Android Signing Works

⚠️ Why the Keystore Is Sacred

🍎 iOS App Signing: A Slightly More Complex World

📜 Certificates (Again, But Apple's Version)

🎫 What Is a Provisioning Profile?

🏷️ The Bundle ID

🪜 How iOS Signing Works (Step by Step)

⚖️ Side-by-Side Comparison

⚛️ App Signing in React Native with Expo

😰 The Old Way (Without Expo)

🚀 Enter EAS Build (Expo Application Services)

🤖 How Expo Handles Android Signing

🍎 How Expo Handles iOS Signing

📄 The eas.json File

🗺️ The Flow: From Code to App Store with Expo

📡 What About Over-the-Air (OTA) Updates?

🚨 Common Mistakes and How to Avoid Them

📖 Quick Reference Glossary

🎯 Wrapping Up

Zustand in React Native: A Modern State Management Solution

Zustand in React Native: A Modern State Management Solution

What is Zustand?

Why Zustand for React Native?

Getting Started with Zustand in React Native

Creating Your First Store

Using the Store in Components

Advanced Patterns for React Native

Persisting State with AsyncStorage

Middleware for Side Effects

Slicing Large Stores

Performance Optimization Tips

Zustand vs. Other Solutions

Real-World Use Cases in React Native

Conclusion

🚀 Understanding JavaScript Async/Await, Promises, and the Event Loop (In the Easiest Way)

🧠 1) Synchronous vs Asynchronous JavaScript

✅ Synchronous (blocking, predictable order)

❌ The real world has slow work

🌟 2) What is a Promise?

A simple Promise

Resolve vs Reject (success vs failure)

Promise mental model (easy)

🟡 3) Consuming Promises with .then() / .catch()

Why chaining can get messy

✨ 4) async / await — Promises, but readable

The rules (must know)

The same fetch example using async/await

✅ Key: await does NOT freeze JavaScript

🧯 5) Error handling with try/catch

🔄 6) The Event Loop — the “traffic controller” of JavaScript

The moving parts (in simple words)

⚡ 7) Microtasks vs Macrotasks (why Promises run before timers)

Example: Promise vs setTimeout

🧩 8) How async/await uses the Event Loop

🧪 9) A more “realistic” event loop demo

🧰 10) Real-world patterns you should know

✅ Run async tasks in parallel (faster)

✅ Promise.allSettled (when you want all results, even failures)

⚠️ 11) Common mistakes (and fixes)

Mistake 1: Using await outside async

Mistake 2: Forgetting to handle errors

Mistake 3: Assuming fetch rejects on 404/500

Mistake 4: forEach + await doesn’t do what you think

🧾 12) Quick cheat sheet

🎯 Conclusion

Bonus: Interview one-liner

Expo, EAS, Prebuild, OTA, CI/CD — A Complete Mental Model for Modern React Native Development

The Two Layers of Every Expo App

1) JavaScript Layer

2) Native Layer

📄 The `eas.json` File

🟡 3) Consuming Promises with `.then()` / `.catch()`

✨ 4) `async` / `await` — Promises, but readable

✅ Key: `await` does NOT freeze JavaScript

🧯 5) Error handling with `try/catch`

🧩 8) How `async/await` uses the Event Loop

Mistake 1: Using `await` outside `async`

Mistake 4: `forEach` + `await` doesn’t do what you think