آپ Client Components کب اور کیسے استعمال کرتے ہیں؟

Question

Accepted Answer

ایک **Client Component** براؤزر میں چلتا ہے (اور ابتدائی HTML کے لیے سرور پر بھی pre-render ہوتا ہے)۔ آپ فائل کے اوپر **`"use client"`** directive کے ساتھ opt in کرتے ہیں۔ آپ کو ان کی ضرورت ہے جب بھی آپ کو interactivity، state، effects، یا browser APIs کی ضرورت ہو۔ ## ایک declare کرنا ```tsx "use client"; // MUST be the first line of the file import { useState } from "react"; export default function Counter() { const [count, setCount] = useState(0); // ✅ hooks work here return ; // ✅ events } ``` ## جب آپ کو Client Component کی ضرورت ہے ```text ✓ useState / useReducer / useEffect / useRef / useContext ✓ Event handlers (onClick, onChange, onSubmit) ✓ Browser APIs (window, localStorage, navigator, IntersectionObserver) ✓ Third-party libraries that use any of the above (most UI/animation libs) ``` ## یہ directive بچوں تک پھیلتا ہے فائل کو `"use client"` کے طور پر mark کرنے سے یہ اور **جو کچھ بھی یہ import کرتا ہے** client bundle کا حصہ بن جاتا ہے۔ تو آپ چاہتے ہیں کہ client boundaries **چھوٹی اور tree میں نیچے** ہوں — "client islands" — بجائے اس کے کہ top-level layout کو client بنائیں (جو پوری app کو براؤزر bundle میں کھینچ دے)۔ ```tsx // ✅ Good: server page, small client island only where needed export default async function Page() { // Server Component const data = await getData(); return <>; // island is "use client" } ``` ## سرور سے client تک ڈیٹا بھیجنا ```tsx // Server Component fetches, passes serializable props down to the client island ``` Server سے Client Component میں pass کیے گئے Props **serializable** ہونے چاہیے (کوئی functions نہیں، کوئی class instances نہیں) کیونکہ وہ server→client boundary کو cross کرتے ہیں۔ ## یہ کیوں اہم ہے Client Components وہ ہیں جو آپ server-first app میں interactivity شامل کرتے ہیں۔ مہارت یہ ہے کہ انہیں minimal رکھیں اور پتوں پر — interactivity جہاں اس کی ضرورت ہے، Server Components ہر جگہ — تاکہ آپ کم سے کم JavaScript بھیجیں۔ `"use client"` کو tree میں اوپر غلط جگہ رکھنا ایک عام غلطی ہے جو bundle کو پھولا دیتی ہے اور Server Components کے فوائد کو ختم کر دیتی ہے۔