Working with Prisma in a team is amazing… until migrations start breaking everything.
If you’ve ever faced weird schema errors, missing migration files, or “schema drift detected” warnings, you’re not alone. 😅

👉 Most issues happen because migration files and local databases are not in sync.

So here is a clean and consistent workflow your whole team can follow to avoid Prisma headaches.

🧱 1. Making Changes to schema.prisma

When you update the schema, keep these rules in mind:

✅ Do this:

• Always generate a migration whenever you change the schema.
• Pull the latest code before generating any new migration.
• Keep migration files safe — don’t delete migrations created by teammates.
• Use clear naming conventions (just like git commit messages)

Example:

npx prisma migrate dev --name "add_user_table"

❌ Don’t do this:

• Don’t run prisma migrate reset casually.
• Don’t skip migration generation.
• Don’t override schema changes by others.
• Don’t delete a migration file to “fix” something.

🔍 If you see a migration in DB but not in folder

Example:
20251204065339_test_model appears in your DB but not in /prisma/migrations

This means:
➡️ Someone created a migration locally but didn’t commit it
OR
➡️ You deleted a migration file accidentally

How to fix:

1. git pull origin main
2. If file is still missing, ask the teammate who created it
3. Never delete migration files manually

🔄 2. Daily Pull Is Mandatory

Before you write even one line of code, do a daily pull.
It prevents 90% of migration mismatches.

Daily starting checklist:

# 1. Pull latest changes
git pull origin main

# 2. Apply new migrations
npx prisma migrate dev

This ensures:

• Your schema is fully updated
• Your local DB matches the team’s version
• You don’t accidentally override someone else’s work

🛠️ Generating New Migrations Properly

Whenever you modify schema.prisma, generate a migration with a clear name:

npx prisma migrate dev --name "add_user_email_field"

Some good examples:

• add_user_table
• add_email_to_users
• remove_legacy_posts_table
• update_payment_model

Your future self will thank you. 😄

🐛 Troubleshooting Common Issues

❗️“Migration file exists in database but not in prisma/migrations folder”

Cause:
A teammate didn’t commit their migration OR you deleted a migration.

Fix:

• Pull latest
• Ask the teammate who created it
• Commit missing migrations
• Never delete migrations yourself

❗️“Schema drift detected”

Cause:
Your local database and migration history don’t match.

Fix:
Follow the daily workflow + avoid resets.

📌 Quick Reference (Do vs Don’t)

✅ Do:

• Pull before editing the schema
• Generate migrations for every change
• Use descriptive migration names
• Commit migrations
• Pull daily before work

❌ Don’t:

• Don’t use migrate reset carelessly
• Don’t delete migrations
• Don’t push schema changes without migrations
• Don’t work on an outdated schema

🎯 Final Thoughts

Prisma is powerful, but it requires discipline when working in a team.
Following this simple workflow will save everyone hours of debugging — and keep your project clean, stable, and stress-free.

We all love a good throw new Error(), right? But in Next.js server actions, that innocent line can sometimes become a silent troublemaker — especially in production!

😬 The Problem

When you do this:

throw new Error('Something went wrong') // ❌ Bad

you might notice… sometimes the error just disappears.
No message. No clue. Nothing. 🤷‍♀️

Here’s why:
When your server sends something to the browser, Next.js needs to convert it into plain text or JSON so it can travel through the network.

That conversion is called serialization.

But…. JavaScript Error objects have a bunch of hidden technical info inside (like stack traces and internal links) — and those parts can’t be converted properly.

So when Next.js tries to send the error to the client, it basically goes:

“Oops, I don’t know how to send this thing… I’ll just skip it.”

And that’s how your error details vanish into thin air 💨

💡 The Better Way

Instead of throwing, return a simple object that you can safely send and display:

try {
  const user = await getUser()
  return { success: true, data: user }
} catch (error) {
  return {
    success: false,
    error: error instanceof Error ? error.message : 'Something went wrong',
  }
}

This way, you:

• Keep full control of what reaches the UI
• Always get readable messages
• Avoid those mysterious “nothing happened” errors

🚨 When Throwing Is Okay

Sometimes you should throw — like when your app can’t continue:

// Example 1: Config is missing
if (!process.env.DATABASE_URL) {
  throw new Error('Database not configured')
}

// Example 2: Unauthorized user
if (!isAuthorized) {
  throw new Error('Unauthorized')
}

Throwing makes sense when something is fundamentally broken, not just when something went wrong.

💭 TL;DR

SituationWhat to DoRegular app or API error✅ Return { success, error }Critical crash (should stop everything)💥 Throw an error

🌸 Wrap-Up

So yeah, in Next.js server actions — 
Throw only when you want a crash, not when you want clarity.
Returning clean objects keeps your UI happy and your users even happier 💖

Ever wondered how your favorite websites load so fast, feel super interactive, or show up perfectly on Google Search? 🤔

Welcome to the enchanted world of modern web rendering techniques — where four little acronyms make a big difference: CSR, SSR, SSG, and ISR.

Let’s break them down in a fun, storybook-style guide you’ll love reading 💖

🧁 Once Upon a Web: The Old School Days

Before React, Vue, or Next.js, developers used tools like PHP to generate web pages. Each time you visited a page, the server would:

🖥️ Fetch data
🧠 Process logic
🧾 Inject content into HTML
🚀 Send full page to your browser

That was cool back then… but as websites grew heavier (imagine loading Instagram or YouTube this way), problems started appearing:

• 😵‍💫 High server load
• 🐢 Slow for users with poor internet
• 🔄 Full page reload on every click

💫 Enter the Heroes of Rendering! 💫

🌟 1. Client-Side Rendering (CSR) — The JavaScript Magician 🧙‍♂️

In CSR, the server sends a blank HTML page with JavaScript files. Then your browser (client) magically builds the actual content using those scripts.

💡 Example: A React Single Page Application (SPA)

Advantages:

• ✨ Super interactive
• 😌 Less load on server
• 🔁 Dynamic updates without reloads

Drawbacks:

• 🐌 Initial load can be slow
• 🙈 SEO suffers (Google bots can’t see client-rendered content)

Test it yourself:
Open DevTools → Network tab → Reload page.
Notice you get minimal HTML first, and the rest loads via JS.

🌍 2. Server-Side Rendering (SSR) — The Chef Who Prepares Your Page 🍽️

SSR means the server prepares the full HTML with content and sends it directly to the browser. The browser shows it instantly, even while JavaScript is still loading.

💡 Example: A Next.js app using getServerSideProps

Advantages:

• ⚡ Fast first load
• 🔍 Better SEO (bots see real content)
• ✅ Great for dynamic content (like dashboards, profile pages)

Drawbacks:

• 😮‍💨 More load on server
• 🐢 Might be slower than static pages

Cute Tip: Try viewing page source of an SSR page — you’ll see real content! Now turn off JavaScript and click around — it won’t work. That’s hydration missing.

📦 3. Static Site Generation (SSG) — The Lazy Genius 🧘‍♀️

SSG creates all HTML pages ahead of time (at build time). When someone visits the site, they get a pre-made page — it’s like taking cookies from the jar instead of baking them each time 🍪

💡 Example: A blog built with Next.js using getStaticProps

Advantages:

• 🏎️ Ultra fast
• 🧵 Great for SEO
• 🧃 Simple, cache-friendly

Drawbacks:

• 📅 Can’t show fresh content instantly
• 🔄 Need to rebuild site for updates

Best for: Blogs, portfolios, marketing sites

⏱️ 4. Incremental Static Regeneration (ISR) — The Smart Assistant 🤖

ISR is like SSG… but smarter! 🧠 You don’t need to rebuild the whole site. Just update specific pages on demand or at time intervals.

💡 Example: Next.js revalidate option inside getStaticProps

Advantages:

• 🔁 Keeps site fast
• 🛠️ Can update dynamic data (like prices or listings)
• 👌 Saves dev effort

Drawbacks:

• ⏳ Updates aren’t instant (depends on time or trigger)
• 🧪 Slightly more setup than basic SSG

🧭 When Should You Use What?

TechniqueBest ForExampleCSRHighly interactive SPAsSocial media appsSSRSEO + dynamic pagesE-commerce product pageSSGStatic contentBlog, docs, portfolioISRStatic + frequent updatesNews feed, job boards

🎯 Final Thoughts: Choose Your Magic Wisely

Each technique is like a superpower 💥 and the trick is knowing when to use what:

• Want lightning-fast pages? → Go SSG
• Need fresh data on every load? → SSR
• Care about interactivity? → CSR
• Want speed + freshness? → ISR

Next.js gives you all these options under one cozy roof 🏠, and that’s what makes it the most loved framework right now 💙

☁️ Bonus: Cute Analogy Corner ☁️

ModeAnalogyCSR🍲 Instant noodles you cook in your own kitchenSSR🍽️ Restaurant where chef serves hot foodSSG🍪 Pre-packed snack ready to eatISR🍰 Snack that auto-restocks in the fridge every few hours

💌 Stay Curious & Keep Coding

This world of web development is super exciting, and there’s always something new to learn.

Until next time — Happy Building & Stay Awesome! 💻🌼

👩‍💻 Written by Juvita Saini
Frontend Dev | Tech Storyteller | Lifelong Learner

Ever felt like JavaScript has too many data structures to keep up with?
You’re not alone. Let’s talk about two superstars today: Set and Map. But don’t worry — this won’t feel like school.

🧺 What is a Set?

Think of a Set as a basket 🧺 — but it only allows unique items.

const basket = new Set();
basket.add("apple");
basket.add("banana");
basket.add("apple");  // duplicate!
console.log(basket);  // Set(2) { "apple", "banana" }

Key Idea:

Sets store only unique values.
No duplicates. Just clean, fresh items.

🔐 What is a Map?

Now think of a Map as a locker with key-value pairs 🔐

const locker = new Map();
locker.set("name", "Juvita");
locker.set("job", "Frontend Developer");
locker.set("name", "Awesome Juvita"); // keys are unique!
console.log(locker); // {'name' => 'Awesome Juvita', 'job' => 'Frontend Developer'}

Key Idea:

Maps store data in key → value format.
And the keys? They can be anything — strings, numbers, even objects!

🧺 Set — The No-Duplicate Gang

🔑 Key Properties of Set:

------------------------------------------------------
| Property/Method  | What it does                    |
| ---------------- | ------------------------------- |
| new Set()        | Creates a new Set               |
| .add(value)      | Adds a value                    |
| .has(value)      | Checks if the value exists      |
| .delete(value)   | Removes a value                 |
| .size            | Tells how many items are inside |
| .clear()         | Empties the set completely      |
| Iterates with    | 'for...of', .forEach()          |
------------------------------------------------------

✅ Code Example:

const fruits = new Set();
fruits.add("apple");
fruits.add("banana");
fruits.add("apple"); // ignored
console.log(fruits); // Set(2) { "apple", "banana" }
console.log(fruits.has("banana")); // true
console.log(fruits.size); // 2
fruits.delete("apple");
console.log(fruits); // Set(1) { "banana" }

add-has-delete-size ( important properties )

🧰 Use Cases:

• Removing duplicates from an array
• Checking visited items (like visited pages)
• Storing unique selections (like tags, filters)
• Fast membership testing

🔐 Map — The Key-Value Power Couple

🔑 Key Properties of Map:

-----------------------------------------------------------------
| Property/Method    | What it does                             |
| ------------------ | ---------------------------------------- |
| new Map()          | Creates a new Map                        |
| .set(key, value)   | Adds or updates a value by key           |
| .get(key)          | Gets the value for a key                 |
| .has(key)          | Checks if the key exists                 |
| .delete(key)       | Deletes the key-value pair               |
| .size              | Number of pairs                          |
| .clear()           | Empties the map                          |
| Iterates with      | for...of, .forEach() on .entries()       |
-----------------------------------------------------------------

🧰 Use Cases:

• Storing key-value pairs (like a phone book)
• Caching results
• Counting frequencies
• Creating lookup tables (like for grouping anagrams!)

✅ Code Example:

const userInfo = new Map();

userInfo.set("name", "Juvita");
userInfo.set("age", 24);
userInfo.set("isDeveloper", true);

console.log(userInfo.get("name")); // "Juvita"
console.log(userInfo.has("age"));  // true
console.log(userInfo.size);        // 3

userInfo.delete("isDeveloper");
console.log(userInfo); // Map(2) { "name" => "Juvita", "age" => 24 }

set-get-delete-size ( important properties )

🌈 When Should I Use What?

• You want to store unique items only
• You want to check if something exists (like checking login tokens or visited pages)
• You’re de-duping arrays

const nums = [1, 2, 2, 3, 3, 3];
const uniqueNums = [...new Set(nums)];
console.log(uniqueNums); // [1, 2, 3]

✅ Use a Map when:

• You need to associate values with keys
• Your keys might be objects, arrays, functions (not just strings)
• You care about insertion order and performance

const cart = new Map();
cart.set({ id: 1 }, "Shirt");
cart.set({ id: 2 }, "Jeans");
// keys are objects!

🧠 Quick Memory Trick:

• Set = Unique values only, like a clean plate 🍽️
• Map = A mini-dictionary 📖 (Key → Value)

💬 Real Talk

✨ I personally use:

• Set when working with arrays I need to clean up.
• Map when building logic-heavy things like:
• Caching data,
• Grouping items by categories,
• Creating efficient lookups.

They’re not scary. They’re just different kinds of helpers. 🤝

🥰 Wrapping it with Love

So next time you need to:

• Throw in a bunch of items without worrying about duplicates? 👉 Use Set.
• Organize data like a dictionary with flexible keys? 👉 Use Map.

Just remember:

Set is your cool minimal bestie ✨
Map is your super-organized brainy friend 🤓

Now you’re ready to boss them around like a JS queen/king 👑

Let’s learn authentication with clerk

✨ 1. Introduction

Authentication is one of the first features every app needs — and often one of the most annoying to build from scratch. Recently, I integrated Clerk into my project, and honestly, I was impressed by how quick and developer-friendly the setup process was.

In this blog, I’ll walk you through how to set up Clerk authentication in your React or Next.js project, so you can get started in minutes — no backend hassle — no reinventing the wheel.

💡 One thing I really liked was how easy Clerk’s documentation is to understand. You can try following it first — but if you get stuck or want a clearer explanation, this blog will guide you step by step. Let’s get started!

🔍 2. What is Clerk?

It handles sign-in, sign-up, user profiles, sessions, and even multi-factor authentication— all out of the box.

The beauty of Clerk is:
✅ Fully managed — no backend setup needed
✅ Pre-built UI components (SignIn, SignUp, UserButton)
✅ Works with social logins, magic links, passwords
✅ Great developer experience (DX)

If you’re tired of manually building login forms or managing JWTs, Clerk is a breath of fresh air.

⚙️ 3. Setting up Clerk in your Next.js app

🧩 Step 1: Install Clerk

npm install @clerk/nextjs

🔑 Step 2: clerkMiddleware(): Create a middleware.js file

clerkMiddleware() grants you access to user authentication state throughout your app.

import { clerkMiddleware } from '@clerk/nextjs/server'

export default clerkMiddleware()

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

🧱 Step 3: Wrap your app in <ClerkProvider>

import {
  ClerkProvider,
} from '@clerk/nextjs'

export default function RootLayout({
  children,
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body >
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}

🧑‍💼 Step 4: Add Clerk UI Components to Your App (Header)

Clerk gives you prebuilt React components that are super easy to plug into your layout. Let’s add a simple Header to your app that shows:

• A “Sign In” button when the user is not logged in
• A “User Profile” button when the user is logged in

"use client";

import {
  SignedIn,
  SignedOut,
  UserButton,
  SignInButton,
} from "@clerk/nextjs";

export default function Header() {
  return (
    <header className="flex justify-between mt-16">
     
    {/* when user is not signed in */}
        <SignedOut>
          <SignInButton />
        </SignedOut>

     {/* when user is signed in */}
        <SignedIn>
   {\* afterSignOutUrl : it’s the redirect URL after signing out, 
     which beginners might wonder about. */}
          <UserButton afterSignOutUrl="/" />
        </SignedIn>
  
    </header>
  );
}

Now import this component in your layout.tsx file or wherever you manage layout across pages:

import Header from "@/components/Header";

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>

       {/* Header that includes both <SignedIn> and <SignedOut> components*/}
          <Header />

          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

Once this is done, your app now has basic authentication UI with zero custom code. 🎉

🧪 How to Test Your Setup

To test your app locally: Open your terminal

npm run dev

1. Visit http://localhost:3000 in your browser
2. You should now see Clerk authentication in action — try signing in!

This was the basic setup — you’re now seeing Clerk in action! 🎉

📌 But Wait! One Important Step Left…

What we’ve done so far is great for testing — but to make Clerk truly work in a real-world environment, you need to connect it to your actual Clerk project using API keys.

This ensures that authentication is securely tied to your app and user data.

📦 Step 5: Link Clerk with Your Project Dashboard

🧷 1. Create a new Clerk account or sign in :

the Create a Clerk account⁠ or sign into the Clerk Dashboard⁠.

🧷 2. Create a new Clerk application

• Click on “Create Application”

• Customize your SignIn Card and give your app a name (e.g., My Video Lib Auth)

• Choose the framework you’re using (select Next.js)

Since we’ve already completed most of the steps, you just need to add your environment keys to finish the setup.

🧰 3. Set up your Clerk environment keys

Now you just need to add the API keys to your .env.local file.

Set your Clerk API keys

Add these keys to your .env.localfile or create it if it doesn’t exist.

//.env 

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=#############################
CLERK_SECRET_KEY=#############################################

🔁 4. Restart your dev server

After saving the keys, restart your server so the environment variables are loaded:

npm run dev

☑️ Quick Recap

Whether you started by setting up your app first or created the Clerk project before — both approaches are valid. Here’s the simple flow again:

Install Clerk → Wrap with Provider → Use Prebuilt Components → Create Clerk App → Add ENV Keys

That’s it — authentication in minutes🙌

What’s Next? — Customize Your Sign In and Sign Up Pages

Now that you have the basic Clerk authentication setup working, the next step is to create custom Sign In and Sign Up pages tailored to your app’s design and user experience.

📌 Clerk’s official docs provide a great guide on how to build these custom pages in Next.js — check it out here:
👉 Custom Sign In or Up Page | Clerk Docs

I’m working on a Part 2 blog post that will walk you through all these steps in detail — so stay tuned! 🎉

“✨ Thank you for reading! 💖 I hope you found this helpful and inspiring. If you enjoyed it, feel free to share, clap 👏, or leave a comment — I’d love to hear your thoughts! 🌟 Happy coding! 💻😊” — Juvita Saini

Let’s write some code in browser :

This piece of code is running because something is making it run!
It’s not magic — there’s actually an engine behind it.

Hold on, we’ll talk about that engine in a bit.But first, what if you type the same line of code directly into your laptop’s terminal?

Here’s what you have to do :
Open your laptop’s terminal and try the same code which you tried in the browser. See the image attached, this was my laptop’s response :

And… it doesn’t work! Ummm… why??

Because JavaScript needs an environment to run — it doesn’t just run by itself. So this means it’s not magic — it needs something to run. That environment could be Node.js or something else!

So, What About Node.js?

I already have Node.js installed on my laptop (you can install it too, based on your operating system).But then you might ask: “If I had Node.js installed, why didn’t it work before?”

Answer: Because you need to enter into that environment first by typing node in the terminal (I'm using a Mac, btw)!

Here’s exactly what you should do:

1. Open your terminal and type node.
2. Then type:

console.log("Hello World!");

3. and press Enter.

Boom!

Now you are inside the Node.js environment, running JavaScript outside the browser, directly on your machine.

That mysterious something?
Yeah, it’s called Node.js!

Hope it’s clear now what Node.js really is!

Why Does Node.js Even Exist?

Originally, JavaScript was made just for browsers — to make web pages interactive.

But developers thought:

“Hey, JavaScript is easy and powerful… why can’t we use it outside the browser too?”

That’s where Node.js comes in!

Node.js allows us to run JavaScript outside of the browser — directly on our computers, servers, and even in cloud systems. Thanks to Node.js, we can now build backend servers, APIs, real-time apps, tools, and so much more — all using JavaScript!

Node.js = JavaScript’s passport to the outside world 🌎.
Node.js is like giving JavaScript a superpower — so it can work outside the browser too! 🌍💥 Node.js made JavaScript leave home (the browser) and explore the world!” 😄🚀

Conclusion

I want to highlight one important thing: In the browser, the “something” that lets JavaScript run is the JavaScript engine — for example, Chrome uses the V8 engine. For running JavaScript outside the browser (like on your laptop, servers, or in the cloud), we need an environment like Node.js (or similar tools).

Bottom line:
JavaScript always needs something — an engine or an environment — to understand and run the code. It can’t run completely on its own!

Hope you now feel a little more comfortable with Node.js! 🚀🎀

Help! My Hover Effects Are Ghosting Me! 👻

The Mystery of Disappearing Hover Effects Solved

Ever created the perfect hover effect for your image, only to find your mouse cursor acting like it has a restraining order against it? 🤔 Your CSS is flawless (or so you thought), but somehow your hover effects are playing hard to get!

The Invisible Blocker Drama 🕵️‍♀️

Picture this scenario: You’ve got a beautiful image 🖼️ with a hover effect that should make it zoom, fade, or do a little dance. But you’ve also placed some absolutely positioned elements in the same container — maybe some text overlays or fancy buttons.

When you hover… NOTHING HAPPENS! 😱

Plot twist: Those absolute elements are like sneaky photobombers in your DOM! Even though you can’t see them (they might be transparent), they’re physically there, intercepting your mouse events before they reach your image.

What’s Actually Happening? 🧐

It’s like trying to pet a cat through a glass window. You can see the cat 🐱, but you’re actually touching the glass, not the cat. In CSS terms:

• Your absolute elements create an invisible layer above your image
• Your mouse is interacting with this invisible layer
• Your image never gets the memo that you’re trying to hover over it
• Your hover effect sits in the corner crying 😢

Two Super Easy Fixes! 🛠️

Solution #1: Give Your Image Superpowers with z-index ⚡

.my-image {
  position: relative;
  z-index: 999; /* UNLIMITED POWER! */
}

.sneaky-absolute-element {
  position: absolute;
  z-index: 1;
}

This is like giving your image a jetpack to fly above the absolute elements. Now your image is on top and can receive all the hover love directly!

Solution #2: Ghost Mode with pointer-events (My Favorite!) 👍

.sneaky-absolute-element {
  position: absolute;
  pointer-events: none; /* Poof! I'm a ghost now! */
}

With pointer-events: none, your absolute elements become like ghosts - visible but unable to interact with the mouse. Your cursor passes straight through them to the image below. Spooky but effective! 👻

Which Solution Should You Choose? 🤷‍♀️

• Use z-index when you want to play “king of the hill” with your elements but still want interaction with everyone
• Use pointer-events: none when you want your absolute elements to be seen but not heard (or clicked, or hovered)

The Big Takeaway 🧠

Next time your hover effects mysteriously vanish, remember: there might be an invisible element playing goalie and blocking all your mouse events! Check for absolute positioned elements and either boost your z-index or make those blockers ghostly with pointer-events: none.

Problem solved! Your hover effects will be back from the dead! 🧟‍♂️

Have your CSS elements ever played hide-and-seek with your mouse cursor? Share your CSS horror stories below! 💬

“✨ Thank you for reading! 💖 I hope you found this helpful and inspiring. If you enjoyed it, feel free to share, clap 👏, or leave a comment — I’d love to hear your thoughts! 🌟 Happy coding! 💻😊” — Juvita Saini

Traditional way of creating forms

Let’s look at the traditional way of creating forms using
1. state for storing the values.
2. onChange in the input field for updating the values in the input.
2. value in the input field.

// states
const [name, setName] = useState(""); // to store name from input field
const [error, setError] = useState(null); // To keep error in a state
const [isPending, setIsPending] = useState(false); //To track when api call
                                             // has started but not completed

//input prop : value and onChange
<input value={name} onChange={(event) => setName(event.target.value)} />

React 19 aims to remove these three (mainly) !

Let’s see whole code :

// Before 
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

Focus on the following aspects in the code above:

• State to manage input values, error statefor handling error and isPending statefor tracking api call.
• The use of value and onChange props in input fields.

Now, imagine you have 10 input fields.

• This would require either creating a single state object with 10 keys or 10 separate states.

  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    streetAddress: '',
    city: '',
    state: '',
    zipCode: '',
    company: '',
    position: '',
  });

• Additionally, you would need to repeat value and onChange for each input field, leading to a lot of repetitive code.
• Also 2 extra states for error and isPending state.

React 19 aims to eliminate this extra boilerplate using the new hook, useActionState, to simplify the process

Updated new way of creating forms with Action

React 19 focuses on removing these :
1. state for storing the values like for input fields, isPending state or error state.
2. onChange in the input field for updating the values in the input.
2. value in the input field.

Step-by-Step Guide: Using useActionState in React 19

In React 19, the useActionState hook simplifies the process of handling forms by removing the need for creating individual states and manually managing values. Instead, you can directly access form data in the handler function, streamlining your form creation.

Here’s how you can use useActionState:

1. Set up the useActionState hook

useActionState takes two parameters:

• Action Function : It’s just an async function with a small difference — it takes two parameters. I’ll explain them below. This function runs when the form is submitted, similar to how a submit handler works.
• Initial State: The starting value of the state is defined here.

useActionState returns three parameters:

• error : Contains any error that may occur during the execution of the action function.
• submitAction : A function that triggers the action (e.g., form submission) when called, typically linked to the form’s onSubmit event.
• isPending : A boolean that tracks the status of the action function, indicating whether it is currently in progress (pending) or completed.

Do not loose hope if you did not understood, let’s code step wise with baby steps :

1. Create a state using the useActionState hook.

const []=useActionState();

2. Write the return arguments.

const [error, submitAction, isPending]=useActionState();

When we will be using them in below code, you will get use of all these three.
3. Pass 2 arguements to the useActionState

const [error, submitAction, isPending]=useActionState(submithandler,null);

4. Let’s write submithandler: Action function that triggers the action when called (e.g., form submission).

const submitHandler = async (previousState, formData) => {
   // we will write code here soon
  };

const [error, submitAction, isPending]=useActionState(submithandler,null);

5. Now pass this submitAction to the form

<form action={submitAction}> // action prop will take submitAction, no onSubmit!
....
</form>

Now write the input fields without onChange and value. Use error and isPending state returned by the useAction.

<form action={submitAction}> // action prop will take submitAction, no onSubmit!
<input name="name" /> {/ No value or onChange needed! /}
<button disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</form>

So you have Almost completed the writing useActionState hook.

submitHandler

Let’s write submitAction’s Action function “submitHandler” which is first argument of the useActionState. This will be triggered when the linked form is submitted.

const submitHandler = async (previousState, formData) => {
// formData.get('name') retrieves the value from input with name="name"
const name = formData.get('name');
// Call API to update name
const error = await updateName(name);
if (error) {
return error; // Returning error will set it in the error state
}
redirect("/path");
};

Whole Code Combined :

// After - Using useActionState
function UpdateName() {

const submitHandler = async (previousState, formData) => {
// formData.get('name') retrieves the value from input with name="name"
const name = formData.get('name');
// Call API to update name
const error = await updateName(name);
if (error) {
return error; // Returning error will set it in the error state
}
redirect("/path");
};

const [error, submitAction, isPending] = useActionState(submitHandler, null);

return (
<div>

<form action={submitAction}>
<input name="name" /> {/ No value or onChange needed! /}
<button disabled={isPending}>
Update
</button>
{error && <p>{error}</p>}
</form>

</div>
);
}

See, how simple we wrote the code using useActionState.

Notice the key differences:
1. No useState hooks needed for form values, error, or loading state
2. No onChange handlers
3. No value props
4. Form inputs only need a name attribute
5. Form uses action prop instead of onSubmit

Handling Multiple Input Fields

The real power of useActionState shines when dealing with multiple input fields.

Here’s an example with a complete registration form:

function RegistrationForm() {

const submitHandler = async (previousState, formData) => {
// Easily access all form values
const userData = {
firstName: formData.get('firstName'),
lastName: formData.get('lastName'),
email: formData.get('email'),
phone: formData.get('phone'),
streetAddress: formData.get('streetAddress'),
city: formData.get('city'),
state: formData.get('state'),
zipCode: formData.get('zipCode'),
company: formData.get('company'),
position: formData.get('position')
};
try {
await registerUser(userData);
redirect('/dashboard');
} catch (error) {
return error.message;
}
};


const [error, submitAction, isPending] = useActionState(submitHandler, null);

return (
<form action={submitAction}>
<input name="firstName" placeholder="First Name" />
<input name="lastName" placeholder="Last Name" />
<input name="email" type="email" placeholder="Email" />
<input name="phone" placeholder="Phone" />
<input name="streetAddress" placeholder="Street Address" />
<input name="city" placeholder="City" />
<input name="state" placeholder="State" />
<input name="zipCode" placeholder="Zip Code" />
<input name="company" placeholder="Company" />
<input name="position" placeholder="Position" />
<button type="submit" disabled={isPending}>
{isPending ? 'Registering...' : 'Register'}
</button>
{error && <p className="error">{error}</p>}
</form>
);
}

// see how clean code looks 🎲 🚀

Benefits of useActionState

1. Reduced Boilerplate: No need for multiple useState hooks or onChange handlers
2. Automatic Form State Management: Form values are automatically collected and available in the submitHandler
3. Built-in Loading State: isPending is handled automatically
4. Simple Error Handling: Just return an error from the action function to display it
5. Better Performance: Fewer re-renders as there’s no state updates on every keystroke

Using useFormStatus with useActionState

If you’re using a reusable component, such as replacing a standard button with a custom SubmitButton, you'll need to pass the isPending prop to ensure the actual button within the SubmitButton component can utilize it.

The traditional approach for this is shown below :

<SubmitButton prop={isPending}>Register</SubmitButton>  

SubmitButton=({isPending})=>{
return (
 <button disabled={isPending}>Submit</button>
)
}

With useFormStatus :

<SubmitButton prop={isPending}>Register</SubmitButton>  ❌ No need to pass prop

import { useFormStatus } from 'react-dom';

// Button Component : Child
function SubmitButton({ children }) {
const { pending } = useFormStatus();
return (
<button type="submit" disabled={pending}>
{pending ? 'Submitting...' : children}
</button>
);
}

// Form : Parent
function RegistrationForm() {
const submitHandler = async (previousState, formData) => {
// ... handler logic
};
const [error, submitAction] = useActionState(submitHandler, null);
return (
<form action={submitAction}>
<input name="username" />
<input name="password" type="password" />
{/ Use the custom button component /}
<SubmitButton>Register</SubmitButton> 
{error && <p>{error}</p>}
</form>
);
}

To access isPending value in the child component of form componnent, mainly the submit button.Think of useFormStatus as a walkie-talkie 📻 that tells child components inside a form whether something is loading. It’s super helpful when you want your submit button (which lives inside the form) to know when the form is busy.

Conclusion

React 19’s useActionState hook represents a significant step forward in simplifying form handling in React applications. It reduces boilerplate code, makes form state management more intuitive, and provides built-in solutions for common form-related challenges like loading and error states.

In Part 2, we’ll dive deeper into the exciting new features of React 19. In upcoming blogs, we’ll also explore advanced capabilities of useActionState, including topics like form validation, file uploads, seamless integration with existing form libraries, and additional powerful hooks.

“✨ Thank you for reading! 💖 I hope you found this helpful and inspiring. If you enjoyed it, feel free to share, clap 👏, or leave a comment — I’d love to hear your thoughts! 🌟 Happy coding! 💻😊” — Juvita Saini

Incase you want to show some changes on screen, but do not want the re-render to happen. Refs are like state variables that don’t trigger re-renders when you set them.

So Let’s understand with Example

Example 1:

You have four images and you want to add a scroll effect. In this case, before and after scrolling, the images will remain the same; the only difference will be their positions. Before we had 4 picture and after we have same 4 pictures, data remains same.

So, if we could scroll without re-rendering, wouldn’t that be a better approach?

Let’s code it :

a) Creating Reference

1. Import useRef

import { useRef } from 'react';

2. Create a reference: calling useRef returns an object with a current

// Create a reference using useRef
const scrollContainerRef = useRef(null); // useRef returns an object with a `current` property

 you are sending null as initial value and 

  it wil return -->   { current : null }

3. Refer to the Container of images by using “scrollContainerRef”

// Reference the container of images using scrollContainerRef
<div ref={scrollContainerRef}>
  {images.map(image => (
    // Render your images here
    <img key={image.id} src={image.url} alt={image.alt} />
  ))}
</div>

now, at this point we have a reference to this DOM element that we can manipulate directly.

b) Using Reference

Let’s manipulate the position of this element using the reference we created with useRef.

Look at image carefully, the hand is controlling person, same way we will control the image with the help of reference which is acting as threads.

• first Create function for scroll (handleScroll)
  scrollContainerRef.current is :
  1) { current : null }, then don’t run code
  2) { current : <div ref={scrollContainerRef}> ……</div> }, then run

it means we need to check that srollContainerRef.current is not null before writing logic to scroll images using reference.

Function and explanation

const handleScroll = (direction) => {
    if (scrollContainerRef.current) {
      const container = scrollContainerRef.current; 
      const scrollAmount = container.clientWidth; // img container width   
     if (direction === 'next') {
        // for all images except last image increment
        container.scrollLeft += scrollAmount;
        // if last image, then 
        if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
          container.scrollLeft = 0;
        }
      } else {
        container.scrollLeft -= scrollAmount;
        if (container.scrollLeft <= 0) {
          container.scrollLeft = container.scrollWidth - container.clientWidth;
        }
      }
    }
  };

• container stores the image container element that div
  const container = scrollContainerRef.current;
• container.clientWidth gives us the viewable width of the container (in easy language, it’s giving width of the element which is div in our case, that div which are are refering to i.e in which we passes ref={scrollContainerRef}. Like in our case, the viewable part will be 1 image which is taking full space of the container. so u can assume that
  scrollAmount will contain width of container of image.
  
  const scrollAmount = container.clientWidth;
• Next we have updated the horizontal position of the container by updating container.scrollLeft. Go through logic which is easy to grasp, give it a read. Point here is not that logic, but rather how we’re utilizing useRef to directly access and manipulate the DOM element (the “div” in this case). This approach with useRef in React is same as how we traditionally used methods like document.querySelector() in vanilla JavaScript to select and manipulate DOM elements.
• Add Buttons to scroll left and right:
  <button onClick={() => handleScroll(‘prev’)}>Previous</button>
  <button onClick={() => handleScroll(‘next’)}>Next</button>

Whole Code : go to any React online editor and paste below code

import React, { useRef } from 'react';
export function App() {
  const scrollContainerRef = useRef(null); const images = [
    {
      id: 1,
      url: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Hand Picked',
      title: 'Camera',
    },
    {
      id: 2,
      url: 'https://images.unsplash.com/photo-1488372759477-a7f4aa078cb6?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'New Arrivals',
      title: 'Image',
    },
    {
      id: 3,
      url: 'https://images.unsplash.com/photo-1517329782449-810562a4ec2f?q=80&w=1463&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Our Store',
      title: 'Phone',
    },
    {
      id: 4,
      url: 'https://images.unsplash.com/photo-1598214886806-c87b84b7078b?q=80&w=1450&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Blooming Day',
      title: 'Food',
    },
  ];
const handleScroll = (direction) => {
    if (scrollContainerRef.current) {
      const container = scrollContainerRef.current;
      const scrollAmount = container.clientWidth;
      if (direction === 'next') {
        container.scrollLeft += scrollAmount;
        if (container.scrollLeft >= container.scrollWidth - container.clientWidth) {
          container.scrollLeft = 0;
        }
      } else {
        container.scrollLeft -= scrollAmount;
        if (container.scrollLeft <= 0) {
          container.scrollLeft = container.scrollWidth - container.clientWidth;
        }
      }
    }
  };
  return (
    <div style={{ width:"400px", margin: '0 auto', padding: '20px', overflow: 'hidden' }}>
      <div 
        ref={scrollContainerRef} 
        style={{ 
          display: 'flex', 
          overflowX: 'hidden', 
          scrollBehavior: 'smooth', 
          width: '100%' 
        }}
      >
        {images.map(image => (
          <div 
            key={image.id} 
            style={{ 
              flex: '0 0 100%', 
              minWidth: '100%', 
              display: 'flex', 
              flexDirection: 'column', 
              alignItems: 'center', 
              justifyContent: 'center', 
              textAlign: 'center' 
            }}
          >
            <img 
              src={image.url} 
              alt={image.alt} 
              style={{ maxWidth: '100%', height: 'auto' }}
            />
            <h2>{image.title}</h2>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '20px' }}>
        <button onClick={() => handleScroll('prev')}>Previous</button>
        <button onClick={() => handleScroll('next')}>Next</button>
      </div>
    </div>
  );
}

Code: https://playcode.io/1924741
Preview: https://preview-1924741.playcode.io/

Key Takway :

The key takeaway is that we’re altering the visual position of elements without triggering a re-render of the component. This efficient DOM manipulation is made possible through useRef, which allows us to directly access and modify the DOM element outside of React’s usual reconciliation process.

Optimizing Performance in React: A Simple Guide to useMemo and memo

When optimizing performance in a React application, two useful tools at your disposal are useMemo and memo. While both serve the purpose of optimization, they are used in different scenarios and ways. Let's explore these differences with examples.

Understanding useMemo

In simple terms, useMemo deals with regular functions like factorial(n) or sum(a, b), among others. Every time a function runs, it checks if it’s seen the same inputs before. If it has, there must already be a result stored in the cache. So, why not grab that result and return it without doing the calculation again? Exactly, no need for unnecessary recalculation.

For instance, if a user inputs 2 and then inputs 2 again, a standard function would perform the entire calculation again. However, with useMemo after the user first enters 2, the result is saved. So, if the user enters the same input again, useMemo won’t recalculate; instead, it will retrieve the stored result.

In technical terms,useMemo is a hook provided by React that allows developers to optimize expensive calculations by memorizing the result of a function given specific inputs. It ensures that the function is only re-computed when one of its dependencies changes, thereby saving computational resources.

Syntax: The syntax for useMemo is similar to useEffect:

useMemo(function, dependencies);

Example: Factorial Function

Consider a scenario where you have a factorial function that takes an integer n as input and returns the factorial of that number. If a user repeatedly enters the same number, recalculating the factorial every time would be unnecessary. Instead, you can use useMemo to cache the result and avoid redundant computations.

// Before using useMemo
function factorial(n) {
  let result = 1;
  for (let i = 2; i <= n; i++) {
    result *= i;
  }
  return result;
}

const result = factorial(5); // Recalculated every time

// After using useMemo
import { useMemo } from 'react';

function MyComponent({ n }) {
  const result = useMemo(() => factorial(n), [n]);

  return <div>{result}</div>;
}

In the above example, useMemo wraps around the factorial function, ensuring that it's only recomputed when n changes.

In short, useMemo is particularly for optimizing functions but what about Functional components ???? or say React Components ??????
I know they are also a function but they are not normal function so using using useMemo is not a right thing to do so, React said “Ok ! I have some thing for optimizing React Components too : memo”

Diving into memo

In Layman Language, If Parent Component re-renders then the child will too re-render(normal behavior) but in case their is a child component whose props are not changed and everything else is same, means that change in Parent is not affecting it then why to re-render this child component, lets optimize it. Hello React !! give us a solution for this problem, React said you can use: memo for optimizing that child component, whenver props don’t change, i should not re-render.

In Technical Language,While useMemo is designed for optimizing expensive calculations, memo is tailored for optimizing component rendering. React's memo is a higher-order component that prevents a functional component from re-rendering unless its props change. This is particularly useful for components that receive complex objects as props and only need to update under certain conditions.

Syntax:

const ReactComponent=memo(ReactComponentDefinition);

Example: Optimizing Component Rendering

Imagine a component that receives a large dataset as a prop and renders a list based on this data. If the dataset doesn’t change frequently, using memo can prevent unnecessary re-renders, improving performance.

import React, { memo } from 'react';

const ListComponent = memo(({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
));

export default ListComponent;

In this example, ListComponent will only re-render if its items prop changes, thanks to memo.

Code Example which includes both memo and useMemo

import React, { memo, useMemo } from 'react';

const ListComponent = memo(({ items }) => (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
));

function MyComponent({ n }) {
  const result = useMemo(() => factorial(n), [n]);

  return (
    <div>
      <ListComponent items={[{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }]} />
      <div>{result}</div>
    </div>
  );
}

// Helper function
function factorial(num) {
  let result = 1;
  for (let i = 1; i <= num; i++) {
    result *= i;
  }
  return result;
}

export default MyComponent;

Summary

Both useMemo and memo are essential tools in a React developer's toolkit for optimizing performance. useMemo is used to optimize expensive calculations by caching results, while memo is used to prevent unnecessary re-renders of functional components. By understanding when and how to use each, developers can significantly improve the efficiency of their React applications.

Remember, while optimization is important, it should be applied judiciously. Always measure and identify bottlenecks before applying these techniques to ensure they provide actual benefits.