Neo42

function getFirstItem<Type>(list: Type[]): Type {
  return list[0]
}

const item = getFirstItem([1])
const item2 = getFirstItem([''])
const item3 = getFirstItem([new Object()])

type Tree<Type> = {
  value: Type

Neo42

// Control Props

import * as React from 'react'
import warning from 'warning'
import {Switch} from '../switch'

const mergeAll =
  (...fns) =>
  (...args) =>
    fns.forEach(fn => fn?.(...args))

Neo42

// Prop Collections and Getters

// merge all passed functions into one
const mergeFn =
  (...fns) =>
  (...args) =>
    fns.forEach(fn => fn?.(...args))

function useToggle() {
  const [on, setOn] = React.useState(false)

Neo42

// Compound Components w/ `React.Children.map` & `React.cloneElement`
import * as React from 'react'
import {Switch} from '../switch'

function Toggle({children}) {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(!on)
  return React.Children.map(children, child =>
    // tell if a child is a built-in DOM component
    typeof child.type === 'string'

Neo42

import React from "react";

const useStateReducer = (prevState, dispatchArg) =>
  typeof dispatchArg === "function" ? dispatchArg(prevState) : dispatchArg;

const useStateInitializer = (initialArg) =>
  typeof initialArg === "function" ? initialArg() : initialArg;

function useState(initialValue) {
  return React.useReducer(useStateReducer, initialValue, useStateInitializer);

Neo42

const [name, setName] = React.useState(
  someExpensiveComputation(props); // run on every render
)

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props); // only run on the initial render
  return initialState;
});

Neo42

{
  "semi": false,
  "embeddedLanguageFormatting": "off",
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "proseWrap": "never",
  "trailingComma": "all",
  "singleQuote": true
}

Neo42

React Performance Recipes

Problem: Unnecessary Callback Re-Initiation

When you're using a callback function within useEffect, it's hard to predict how callback function will be modified in the future. Only passing in certain variables from the callback to the deps list won't do. Because once the variables passed in gets removed, your dependencies won't work any more. But you still have to provide some values to the dependency list to sync useEffect with the callback change.

const updateLocalStorage = () => window.localStorage.setItem('count', count)
React.useEffect(() => {
 updateLocalStorage()

Neo42

const quickSort = (arr, low = 0, high = arr.length - 1) => {
  if (low < high) {
    const p = partition(arr, low, high)
    quickSort(arr, low, p)
    quickSort(arr, p + 1, high)
  }
}
const partition = (arr, low, high) => {
  const pivot = arr[Math.floor((high + low) / 2)]
  let i = low

Neo42

const quickSort = (arr, low = 0, high = arr.length - 1) => {
  if (low < high) {
    const p = partition(arr, low, high)
    quickSort(arr, low, p - 1)
    quickSort(arr, p + 1, high)
  }
}

const partition = (arr, low, high) => {
  const pivot = arr[high]