Adding "use client" causes Fast Refresh to perform a full reload?

Question

So, I've been having this problem, and during my testing. removing "use client" does solve the fast refresh issue here. why ?

Note that I'm using SCSS modules, with one global.scss file in the root layout.tsx

"use client"
import React from "react";
import styles from "../../../../../styles/pages/book-page.module.scss";
import { VerticalBookImage } from "@/components";
import { FaArrowDown, FaPen, FaPlus } from "react-icons/fa";
type Props = {
  cover_id: number;
  title: string;
  authorsNames: string[];
  rating: number;
  numberOfRatings: number;
  numberOfReviews: number;
  description: string;
};

function MainInfo({
  cover_id,
  title,
  authorsNames,
  rating,
  numberOfRatings,
  numberOfReviews,
  description,
}: Props) {
  const bookImageURL =

https://covers.openlibrary.org/b/id/${cover_id}-L.jpg`;

return (
<div className={styles.heroSection}>
<div className={styles.sideInfo}>
<VerticalBookImage src={bookImageURL} alt={title} />
<button>
Want to Read <FaPen />
</button>
<button>
Buy on Amazon USA <FaArrowDown />
</button>
<button>
Add to Wishlist <FaPlus />
</button>
</div>
</div>
);
}

export default MainInfo;
`

);}export default MainInfo;`

Red-necked Grebe · Answer

Edit, it's actually random what causes it. sometimes It works with "use client" , sometimes it doesn't . sometimes even when I have an empty component the fast refresh doesn't work. I'm very confused

Adding "use client" causes Fast Refresh to perform a full reload?

1 Reply