Client Components
"use client", DIRECTIVE, EK, FILE, ke, SABSE, UPAR, likhi, jaati hai — YE, US, FILE, aur, USKE, IMPORTED, COMPONENTS, ko, "Client, Boundary" mein, MARK, karta hai — WOH, BROWSER, mein, HYDRATE/RENDER, HOTE, HAIN.
Client, Components, JAVASCRIPT, HOOKS, (useState, useEffect, useContext) aur, BROWSER, APIs, (localStorage, window) USE, kar, sakte, HAIN — SERVER, Components, ISME, se, KUCH, bhi, NAHI, kar, sakte.
"use client";
import { useState } from "react";
export default function LikeButton() {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(!liked)}>{liked ? "❤️" : "🤍"}</button>;
}- "use client" = file/import chain, ko, client, boundary, mein, MARK, karta, hai
- Hooks (useState, useEffect) aur, browser, APIs, ke, liye, ZAROORI
- Interactivity, ke, liye, ye, EXTRA, JavaScript, bundle, size, ki, COST, PAR, aata, hai
"use client" MARK, hona, ISKA, MATLAB, YE, NAHI, hai, ki, COMPONENT, PURELY, CLIENT-SIDE, hai — Next.js, ISE, bhi, INITIAL, HTML, ke, liye, SERVER, PAR, PRE-RENDER, karta hai, PHIR, CLIENT, PAR, HYDRATE, karta hai INTERACTIVITY, ke, liye.
MANY, third-party, npm, packages, JO, hooks, ya, browser, APIs, USE, karte, HAIN, unhe, "use client" MARK, karna, PADТА, hai — agar, PACKAGE, khud, ISE, MARK, nahi, karta, EK, WRAPPER, COMPONENT, banaна, PADТA, hai.
// wrapper.js:
"use client";
export { default } from "third-party-interactive-lib";