October 2019
Intermediate to advanced
426 pages
11h 49m
English
The useDebugValue Hook is useful for developing custom Hooks that are part of shared libraries. It can be used to show certain values for debugging in React DevTools.
For example, in our useDebouncedUndo custom Hook, we could do the following:
export default function useDebouncedUndo (timeout = 200) { const [ content, setInput ] = useState('') const [ undoContent, { set: setContent, ...undoRest } ] = useUndo('') useDebugValue('init') const [ setDebounce, cancelDebounce ] = useDebouncedCallback( (value) => { setContent(value) useDebugValue('added to history') }, timeout ) useEffect(() => { cancelDebounce() setInput(undoContent.present) useDebugValue(`waiting ${timeout}ms`) }, [cancelDebounce, undoContent]) function setter ...Read now
Unlock full access