hrdtbs

正常に遅延する

const debounced = useCallback(debounce((newValue) => myFunc(newValue), 300), [])

遅延しない ← valueが更新される度にdebouncedも更新されるため

const debounced = useCallback(debounce(() => myFunc(value), 300), [value])

hrdtbs

前提知識

（例）hoge.comからpiyo.comのリソースを取得したい場合

訪れたことがなければpiyo.comのドメイン名からIPアドレスを調べる（DNSルックアップ）→piyo.comのサーバーとの接続を確立する（TCP ハンドシェイク ）,HTTPSの場合は安全な通信の準備（TLS ネゴシエーション）も→リソースの取得といった順で行われる

詳しくは、https://developer.mozilla.org/ja/docs/Web/Performance/How_browsers_work

dns-prefetch

hrdtbs

import { useForceUpdate } from "./useForceUpdate"
import { useLayoutEffect, useMemo, useRef } from "react"

interface Config extends RequestInit {
    type?: "text" | "json" | "blob" | "formData"
    auth?: string
}

export const useFetch = <T>(input: RequestInfo, config?: Config): [T, Error] => {
    const forceUpdate = useForceUpdate()

hrdtbs

#!/usr/bin/python
# -*- coding: utf-8 -*-

# This script came about after I removed several big files from a GitHub
# repository (see https://gist.github.com/agarny/5541082) and force pushed
# everything back to GitHub. However, cloning the 'new' GitHub repository still
# results in those big files being present in the git history. This is, among
# other things, due to some pull requests I have in that repository and which
# reference those big files. I contacted GitHub about this, but there seems to
# be nothing that they can do about it. So, I was left with no other choice but

hrdtbs

TooltipとPopoverの使い分け

コンポーネントの目的

Tooltipは、ツールまたは他の相互作用が何を行うかについてのヒントを意図するものです。コンテンツを追加するのではなく、マウスオーバーしたコンテンツを明確にするか、使用を助けることを目的としています。

Popoverは、関連する追加コンテンツを提供するためのものです。

コンポーネントの大きさ

hrdtbs

import { useCallback, useEffect, useState } from "react"

interface BeforeInstallPromptEvent extends Event {
    readonly platforms: Array<string>
    readonly userChoice: Promise<{
        outcome: "accepted" | "dismissed"
        platform: string
    }>
    prompt(): Promise<void>
}

hrdtbs

詳しく知りたい人はこちら

Type-Only Imports and Exports

ほとんどの人は特に気にしなくいい機能。ただ記法が増えるので混乱しないように。

import type { SomeThing } from "./some-module.js";

export type { SomeThing };

hrdtbs

type Nominal<T, K> = T & {
    __name__: K;
}

type Unnominal<N> = Omit<N, '__name__'>

const makeNewNominal = <N>() => {
  return (value: Unnominal<N> & {
    __name__?: never;
}) => {

hrdtbs

import { render } from "react-dom"
import React, { Suspense, useState } from "react"

const LazyComponent = () => {
    const [done, setDone] = useState(false)
    if (!done) {
        throw new Promise(resolve => {
            window.setTimeout(() => {
                console.log("inifinity!!!!!")
                setDone(true)

hrdtbs

class Comparator {
    constructor(compareFunction) {
        this.compare = compareFunction || Comparator.defaultCompareFunction
    }
    static defaultCompareFunction(a, b) {
        if (a === b) {
            return 0
        }
        return a < b ? -1 : 1
    }