A collection of ref-related hooks.
npm install use-referee⚽ A collection of ref-related hooks.
   
#### Skypack
``javascript`
import {
useConstant,
useLatest,
usePrevious,
useRefs
} from "https://cdn.skypack.dev/use-referee"
#### Yarn
`bash`
yarn add use-referee
#### npm
`bash`
npm install use-referee
`typescript`
useConstant
Given a (lazy) variable, useConstant will return it as is while never updating or mutating it on subsequent changes.
Import useConstant.
`typescript`
import { useConstant } from "use-referee"
Declare a constant from an initial (lazy) value.
`typescript
const id = useConstant(() => uuid())
// id: "123e4567-e89b-12d3-a456-426614174000"
`
`typescript`
useLatest
Given a variable, useLatest will return a ref which reflects its latest value—mutating itself on variable changes to do so.
Import useLatest.
`typescript`
import { useLatest } from "use-referee"
Pass it a variable and get a mutating ref of its latest value in return.
`typescript
const [state, setState] = useState(false)
const latest = useLatest(state)
// latest: { current: false }
`
Being a ref, latest will always reflect the latest state value even when omitted from dependency lists (e.g. []).
`typescript
setState(true)
useEffect(() => {
// latest: { current: true }
}, [])
`
`typescript`
usePrevious
Given a variable, usePrevious will return its previous value or undefined before an initial change has happened.
Import usePrevious.
`typescript`
import { usePrevious } from "use-referee"
Pass it a variable and get its previous value in return.
`typescript
const [state, setState] = useState(false)
const previous = usePrevious(state)
// previous: undefined
setState(true)
// previous: false
setState(false)
// previous: true
`
`typescript`
useRefs
Given any number of refs, useRefs will return a single callback ref that merges them all.
Import useRefs.
`typescript`
import { useRefs } from "use-referee"
Pass it multiple refs and get a single ref in return.
`tsx
const refs = useRefs(ref, forwardedRef)
return
// ref: { current:
}