DOs and DON'Ts

List of Do's and son'ts for frontend developers with respect to javascript frameworks

Overview

List of Do's and son'ts for frontend developers with respect to javascript frameworks ;)

TanStack From

DefaultValue

TanStack Form need defaultValues for both Create and Update cases. Otherwise you get Changing an uncontrolled input to be controlled error.

Ref: tanstack debugging

TLDR

Explicit defaultValues are required: TanStack Form uses defaultValues as the source of truth for the form's initial structure and type inference.

Zod schema for optional URL/Email fields

z.string().email().optional() doesn't work, append .or(z.literal(""))

Ref: discussions 2801 , issues 310

✅ DO

backendUrl: (schema) =>
  schema.url({ message: "Invalid backend URL" }).or(z.literal("")),

TanStack Table

Excessive `Dialog` mounting

Conditionally mount Dialog Components in Table's ActionButton.

Reason

ActionButton is rendered for each row of a large table. Mounting them ahead of time before needed, will result excessive use of memory.

✅ DO

{
  showUpsertDialog && (
    <UpsertDialog
      initialData={row.original}
      open={showUpsertDialog}
      setOpen={setShowUpsertDialog}
    />
  );
}

Drizzle Schema

No defaults values for zod schema

when defining drizzle-zod schema for create/update input, don't set default values. Instead set default values in database schema

Reason

Lets say you want to update percentage field to 0 and if you have default value in zod schema as 45, when update, next-safe-action will set it back to 45

On this page