drago.cc

In a thread, Bret Little explains why, in his opinion, the shadow DOM is not yet ready for real-world uses.

In React apps that use SSR, where your component code can run both on the server and on the client, it's sometimes important to know where your code is currently running.

In "The Perils of Rehydration", Josh Comeau talks about why the following is a problem for rehydration:

const Component = () => {
  if (typeof window === 'undefined') {
    return null
  }

  // Client-only code

  return <>...</>;
}

And why waiting until after the Component mounts can help avoid rehydration issues:

const Component = () => {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  // Client-only code

  return <>...</>;
}

export const Button = (props: JSX.IntrinsicElements['button']) => {
  return <button type="button" {...props} />;
};

These types can be helpful, especially when working with generated types from APIs.

/**
 * Make all properties in TType required and non-nullable
 * @example
 * Definite<{ foo?: string | null }> // => { foo: string }
 */
export type Definite<TType> = Required<{
  [TKey in keyof TType]: NonNullable<TType[TKey]>;
}>;

/**
 * Same as Pick, but all picked properties are required and non-nullable
 * @example
 * PickDefinite<{ bar?: string | null, foo?: string | null, }, 'bar'>
 * // => { bar: string }
 */
export type PickDefinite<TType, TKey extends keyof TType> = Definite<
  Pick<TType, TKey>
>;

/**
 * Retrieve the type of a single property from a type or interface
 * @example
 * type BarType = Take<{ foo: string, bar?: string }, 'bar'>
 * // => string | null | undefined
 */
export type Take<TType, TKey extends keyof TType> = TType[TKey];

always use Hooks at the top level of your React function, before any early returns

— Rules of Hooks