@ryuuji3/use-callback-after-render

react-mask-hook

An React hook to schedule layout effects after next render.

Installation:

npm install @ryuuji3/use-callback-after-render

Sample Usage:

import useCallbackAfterRender from '@ryuuji3/use-callback-after-render'

function Component() {
    const [ value, setValue ] = useState('')
    const scheduleAfterNextRender = useCallbackAfterRender()

    function handleChange(e) {
        setValue(e.target.value) // this is asynchronous

        // because setValue is asynchronous, we want to run a layout effect AFTER next render
        scheduleAfterNextRender(() => {
            e.target.selectionStart = 0 // reset cursor to start
        })
    }

    return <input value={value} onChange={handleChange}>
}