Mauricio Robayo MauricioRobayo

## component-as-prop-with-typescript.ts
import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
import "./styles.css";

interface Component1Props<T extends ElementType = "div"> {
  as?: T;
  children: ReactNode;
}
type Props<T extends ElementType> = Component1Props<T> &
  Omit<ComponentPropsWithoutRef<T>, keyof Component1Props<T>>;
function Component1<T extends ElementType>({ children, as }: Props<T>) {

## 0-parallel.js
const p1Promise = p1();
const p2Promise = p2();

const r1 = await a1;
const r2 = await a2;

## objectsVsEnums.ts
const Direction = {
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3,
} as const;

type Direction = typeof Direction[keyof typeof Direction];
function run(dir: Direction) {}

## surface-area.txt
It's much easier to recover from no abstraction, than the wrong abstraction.

Abstractions come with a significant cost and a significant risk.

It's better to under-abstract to begin with.

Start with a few abstractions and lots of repetitions. Find repetitive patterns. If the pattern doesn't lead to bugs, don't fix it. It might look ugly but it's not hurting anyone. Try to generalize it and you risk adding bugs in the generalization. It only adds surface area to everyone.

## 0. lazy-initial-state.txt
The initialState argument is the state used during the initial render. In subsequent renders, it is disregarded. If the initial state is the result of an expensive computation, you may provide a function instead, which will be executed only on the initial render:

## optionalChainingOperator.txt
The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.

obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)

## testingAsynchronousCode.js
test('the data is peanut butter', async () => {
  const data = await fetchData();
  expect(data).toBe('peanut butter');
});

test('the fetch fails with an error', async () => {
  expect.assertions(1);
  try {
    await fetchData();
  } catch (e) {

## promise-type.ts
type PromiseReturnType<T> = T extends Promise<infer R> ? R : T;

## 0_lookahead.txt
Lookahead

The syntax is: X(?=Y), it means "look for X, but match only if followed by Y". There may be any pattern instead of X and Y.

For an integer number followed by %, the regexp will be \d+(?=%):

## gist:23421d9d8d7b0e0a856b2333fb20a9e6
Absence of structure is more structured than bad structure.
	import { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
	import "./styles.css";

	interface Component1Props<T extends ElementType = "div"> {
	as?: T;
	children: ReactNode;
	}
	type Props<T extends ElementType> = Component1Props<T> &
	Omit<ComponentPropsWithoutRef<T>, keyof Component1Props<T>>;
	function Component1<T extends ElementType>({ children, as }: Props<T>) {
	const p1Promise = p1();
	const p2Promise = p2();

	const r1 = await a1;
	const r2 = await a2;
	const Direction = {
	Up: 0,
	Down: 1,
	Left: 2,
	Right: 3,
	} as const;

	type Direction = typeof Direction[keyof typeof Direction];
	function run(dir: Direction) {}
	It's much easier to recover from no abstraction, than the wrong abstraction.

	Abstractions come with a significant cost and a significant risk.

	It's better to under-abstract to begin with.

	Start with a few abstractions and lots of repetitions. Find repetitive patterns. If the pattern doesn't lead to bugs, don't fix it. It might look ugly but it's not hurting anyone. Try to generalize it and you risk adding bugs in the generalization. It only adds surface area to everyone.
	The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.

	obj.val?.prop
	obj.val?.[expr]
	obj.arr?.[index]
	obj.func?.(args)
	test('the data is peanut butter', async () => {
	const data = await fetchData();
	expect(data).toBe('peanut butter');
	});

	test('the fetch fails with an error', async () => {
	expect.assertions(1);
	try {
	await fetchData();
	} catch (e) {
	Lookahead

	The syntax is: X(?=Y), it means "look for X, but match only if followed by Y". There may be any pattern instead of X and Y.

	For an integer number followed by %, the regexp will be \d+(?=%):