- 意図しないDOMノードが選択されるケースを防ぐため
Reactを用いた多くのプロジェクトでは様々なライブラリを使用します。 その中で挿入されたクラス名やIDが意図せず重複し、誤った選択がされるケースをuseRefを用いれば防ぐことができます。
- 単一方向のデータフローに適しているため
useRefでは、親コンポーネントでノード参照を定義し、それらを子コンポーネントに放り投げることができます。
version: 2.1 | |
executors: | |
golang: | |
docker: | |
- image: circleci/golang:latest | |
environment: | |
GO111MODULE: "on" | |
commands: |
# 構文 | |
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 |
workflows: | |
version: 2 | |
hogehoge: | |
jobs: | |
- deploy: | |
filters: | |
branches: | |
only: | |
- master | |
version: 2 |
let done = false | |
const LazyComponent = () => { | |
if (!done) { | |
throw new Promise(resolve => { | |
window.setTimeout(() => { | |
done = true | |
resolve() | |
}, 3000) | |
}) | |
} |
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 |
const throttle = (callback) => { | |
let throttled = false | |
return () => { | |
if(throttled) return | |
throttled = true | |
window.setTimeout(()=>{throttled = false}, 500) | |
callback() | |
} | |
} |
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) |
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 | |
} |