Skip to content

Instantly share code, notes, and snippets.

View adityacodepublic's full-sized avatar

adityacodepublic adityacodepublic

View GitHub Profile

react hook form controller component that returns useController, or register return based on controlled boolean prop (default: true )

requires your form wrapped in FormProvider

import type {
  FieldPath,
  FieldValues,
  ControllerProps,
  UseControllerProps,
  UseFormRegisterReturn,

Some utils

const isDateObject = (value: unknown): value is Date => value instanceof Date;

const isNullOrUndefined = (value: unknown): value is null | undefined =>
  value == null;

const isObjectType = (value: unknown): value is object =>
  typeof value === "object";

PRINT HIDDEN HTML ELEMENTS

  • some conditionally rendered elements are not easily, debuggable in elements in dev tools. as they can get removed as we interact with the dev console.
  • so paste this in the console, with the classname or attributes of the element to watch. -> and the element will get printed in the console.
  • make sure to add your element attributes like id, or .class etc........
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (

Caching diagram Next js


React cache and Next js cache

Why unstable_cache keyparts is optional

  1. unstable cache can like do basic function analysis. Hence why keyparts is optional. You can either use that or just pass the id as args to the function signature so it can see the IDs changing.

    Basically you either help nextjs figure out the function is changing by passing ids as args.. or you just do it yourself by putting the IDs in keyparts

  2. In the example below, using string literals like shopify in the key part array is not necessary. They never change, so they never do anything.

    <div key="shopify" />

    It's like the key here does nothing since it never changes.