hrdtbs

なぜgetElementByIdやquerySelectorではなく、useRefを使うのか

1. 意図しないDOMノードが選択されるケースを防ぐため

Reactを用いた多くのプロジェクトでは様々なライブラリを使用します。 その中で挿入されたクラス名やIDが意図せず重複し、誤った選択がされるケースをuseRefを用いれば防ぐことができます。

2. 単一方向のデータフローに適しているため

useRefでは、親コンポーネントでノード参照を定義し、それらを子コンポーネントに放り投げることができます。

hrdtbs

version: 2.1

executors:
  golang:
    docker:
      - image: circleci/golang:latest
        environment:
          GO111MODULE: "on"

commands:

hrdtbs

# 構文
npm install github:[user|organization]/[repository]#[branch|tag|commit]

# 例文
npm install github:hrdtbs/hello-world#build

## *私が試した限りではbranch、tag、commitはorでした。要確認。

# セマンティックバージョニング
npm install github:[user|organization]/[repository]#semver:^X.Y.Z

hrdtbs

workflows:
  version: 2
  hogehoge:
    jobs:
      - deploy:
         filters:
          branches:
            only:
             - master
version: 2

hrdtbs

let done = false
const LazyComponent = () => {
    if (!done) {
        throw new Promise(resolve => {
            window.setTimeout(() => {
                done = true
                resolve()
            }, 3000)
        })
    }

hrdtbs

import { useLayoutEffect, useState } from "react"

let animationFrameID = 0
export const useIntersectionObserver = (
    ref: React.RefObject<HTMLElement>,
    options?: IntersectionObserverInit
): IntersectionObserverEntry | undefined => {
    const [entry, setEntry] = useState<IntersectionObserverEntry>()
    useLayoutEffect(() => {
        const element = ref.current

hrdtbs

const throttle = (callback) => {
  let throttled = false
  return () => {
    if(throttled) return
    throttled = true
    window.setTimeout(()=>{throttled = false}, 500)
    callback()  
  }
}

hrdtbs

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

interface UseResizeObserverReturns<T> {
    ref: React.RefObject<T>
    width: number
    height: number
}

const useResizeObserver = <T>(): UseResizeObserverReturns<T> => {
    const ref = useRef<T>(null)

hrdtbs

import { useEffect, useRef } from "react"
export const useOnClickOutside = <T extends HTMLDivElement>(handler?: (event: MouseEvent | TouchEvent) => void) => {
    const ref = useRef<T>(null)
    useEffect(() => {
        const listener = (event: MouseEvent | TouchEvent) => {
            if (handler) {
                if (!ref.current || ref.current.contains(event.target as Node)) {
                    return
                }

hrdtbs

なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

export const Example = ({ loadOnlyOnce }) => {
    useEffect(() => {
      loadOnlyOnce()
    }, [loadOnlyOnce]) // ← WHY？
}