What Happens When You Break the Rules of Hooks in React?

Muhammad Obaid Ullah Khan — Thu, 10 Apr 2025 13:18:46 +0000

React has a strict rule:

Don't call hooks inside loops, conditions, or nested functions.

This isn’t just a style preference, it’s required for React to work correctly.

If you break this rule, you’ll run into bugs that are hard to trace. Here's exactly why this rule exists and what React is doing under the hood that makes it necessary.

Here's what’s actually going on:
React doesn’t track your hooks by name instead it tracks them by order of execution.

So when your component renders, React expects something like this:

1st hook → useState 2nd hook → useEffect 3rd hook → useRef

This order must stay the same every render.
If it doesn't? React pulls the wrong state out of the wrong slot, and now your useRef is getting count’s value and chaos begins 🧨

## Here's the kind of code that breaks things:

On one render, useState is there.
On the next? It's skipped.
Bug time! 🐞

✅ The fix? Simple rule:

Call all your hooks at the top level, and in the same order on every render.

No if, no for, no function inside a function.

🎯 The takeaway:
React’s rules around hooks might seem strict, but they exist for a reason: to ensure your state and side effects are predictable and consistent. By following these simple guidelines, you can avoid tricky bugs and keep your app running smoothly.

If you’ve ever run into strange issues with hooks, this might be the explanation you’ve been looking for. Stay consistent, keep your hooks at the top level, and React will handle the rest.

Got a hook-related bug story of your own? Drop it in the comments, or let me know if this helped clear things up! 👇

How Next.js Image Component Solves Layout Shift Issues 🚀

Muhammad Obaid Ullah Khan — Mon, 04 Nov 2024 18:14:33 +0000

Have you ever been reading something, and suddenly the content jumps because an image finished loading? This common issue, called Cumulative Layout Shift (CLS), impacts user experience and SEO. Luckily, Next.js offers a smart solution with its Image component.

What is Cumulative Layout Shift (CLS)? 🤔

CLS is a Core Web Vital metric that measures how much unexpected layout shift happens as a page loads. A good CLS score is essential because it means:

✅ Better User Experience
✅ Higher SEO Rankings
✅ A More Professional-Looking Website

The Issue with Standard `<img>` Tags

Using traditional HTML <img> tags can lead to layout shifts because the browser doesn’t know the image dimensions until it loads. Here’s what typically happens:

Page text loads.
Image starts downloading.
Once loaded, the image pushes content down, causing an annoying “jump.”

Let's see the problem in action:

👆 Watch how content jumps with traditional images (left) vs. stable loading with Next.js Image component (right).

Next.js Image Component to the Rescue 🦸‍♂️

With Next.js’s Image component, you can prevent layout shifts by specifying dimensions up front, giving the browser space to load the image without affecting the layout.

// ✅ Good Practice
import Image from 'next/image';

function ProductCard() {
  return (
    <Image
      src="/product.jpg"
      alt="Product description"
      width={640}
      height={480}
      loading="lazy"
    />
  );
}

🗝️ Key Features That Prevent Layout Shift

Reserved Space for Smooth Loading

Required Dimensions

With the Image component, width and height properties are mandatory. This reserves space for the image even before it loads, preventing layout shifts.
Responsive Sizing

The component automatically adapts to the screen size while maintaining the image’s aspect ratio. This prevents layout shifts across different device sizes.

Automatic Placeholder

The Image component can use a blur placeholder, reserving the exact space needed. This allows the layout to stay stable while the image loads, making the experience smoother.

Best Practices for Using the Image Component

Following these practices will help you get the most out of the Next.js Image component.

Always Set Dimensions Defining dimensions helps the browser know the exact space the image will take up, avoiding layout shifts.

   // Good
   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" />

   // Bad (missing dimensions)
   <Image src="/hero.jpg" alt="Hero image" />

Use Blur Placeholder for Important Images Adding a blur placeholder for above-the-fold images gives a smooth loading effect.

   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" placeholder="blur" />

Set Priority for Critical Images For hero images or other important visuals, set the priority property to true for faster loading.

   <Image src="/hero.jpg" width={1200} height={600} alt="Hero image" priority />

Check Your CLS Improvements 📊

Use these tools to measure your CLS improvements:

Chrome DevTools (Performance tab)
Lighthouse Audits
Core Web Vitals in Google Search Console

Avoid Common Mistakes ⚠️

Don’t Skip Alt Text Alt text is essential for accessibility, making your images accessible to screen readers.

   // Bad
   <Image src="/product.jpg" width={400} height={300} />

   // Good
   <Image src="/product.jpg" width={400} height={300} alt="Red ceramic coffee mug with floral pattern" />

Handle External Image URLs Carefully If you’re using images from an external source, configure domains in next.config.js:

   module.exports = {
     images: {
       domains: ['example.com'],
     },
   };

Wrapping Up

By using the Next.js Image component and following these best practices, you’ll ensure smooth loading, a stable layout, and a more professional website experience.

📏 Specify dimensions
🔄 Use blur placeholders and lazy loading
📈 Monitor your CLS scores

Enjoy coding with Next.js, and let your images load proficiently! 🎉

DEV Community: Muhammad Obaid Ullah Khan