Skip to main content

Posts

React.memo perform shallow comparsion of objects ie non-primitive data

  React.memo performs a shallow comparison, so nested objects are not compared by their contents. It compares the references of object props using Object.is() . Example jsx const Child = React.memo(({ user }) => { console.log("Child rendered"); return <p>{user.profile.name}</p>; }); Suppose the parent passes this object: jsx const user = { name: "John", profile: { name: "John Doe" } }; Case 1: New outer object, same nested values js const prevUser = { name: "John" , profile: { name: "John Doe" } }; const nextUser = { name: "John" , profile: { name: "John Doe" } }; React compares the user prop references: js Object. is (prevUser, nextUser); // false Result: The component re-renders because the outer object reference changed. React doesn't need to compare the nested properties. Case 2: Same outer object, ...
Post a Comment
Read more
Recent posts

Why return in if and no else?

  Common pattern without else Many developers prefer an early return instead of else : function login ( user ) { if ( ! user ) { console . log( "No user found" ); return ; } console . log( "Welcome" ); } Here no else is needed because return exits the function. Rule: If there is no else , JavaScript simply ignores the if block when the condition is false and continues executing the next line. why return return is used to immediately stop a function and optionally send a value back . Example without return : function greet () { console . log( "Hello" ); console . log( "Welcome" ); } greet (); Output: Hello Welcome Both lines run. Example with return : function greet () { console . log( "Hello" ); return ; console . log( "Welcome" ); } greet (); Output: Hello After return , the function ends immediately. Anything below it is not executed. That's why de...
Post a Comment
Read more

What ShippingFormInputs actually does ?

  What <ShippingFormInputs> actually does useForm < ShippingFormInputs >() This is NOT runtime code . It only tells TypeScript: “This form should only accept fields defined in ShippingFormInputs.” 📦 Example type type ShippingFormInputs = { email: string ; age: number ; }; So valid fields are only: "email" "age" ❌ How it catches typos Example mistake: register ( "emial" ); // ❌ typo 👉 TypeScript immediately checks: “Is 'emial' a key in ShippingFormInputs?” Answer: ❌ NO So it shows error: Argument of type '"emial"' is not assignable to parameter of type '"email" | "age"'
Post a Comment
Read more

UseForm working

 Let’s make it super clear with a real example. You have this: type ShippingFormInputs = { email: string ; age: number ; }; and this Zod schema: const shippingFormSchema = z . object({ email: z . string() . email(), age: z . number() . min( 18 ), }); and this form: const { register, handleSubmit, formState: { errors } } = useForm < ShippingFormInputs >({ resolver: zodResolver ( shippingFormSchema ) }); 🧠 What happens step by step 1. TypeScript ( <ShippingFormInputs> ) — BEFORE running code This only works while coding. Example mistake: register ( "emial" ); // ❌ typo 👉 TypeScript will immediately show error: "Property 'emial' does not exist" ✔ This is ONLY for developer safety. 2. Zod ( shippingFormSchema ) — WHEN user submits form Now user runs the app and enters: email: "abc" age: 10 Then user clicks submit. 👉 Now Zod runs: z . string() . email() ❌ invalid z . number() . min( 18 ) ❌ in...
Post a Comment
Read more