Adam L Barrett PRO
Adam L Barrett is a JavaScript and Front-End consultant, a contributor to open source, and avid bike-shedder.
The Weird Ones
React Hooks:
Built In Hooks:
-
useState() + useEffect()
-
useContext() + useRef()
-
useMemo() + useCallback() -
useReducer() -
Custom Hooks
...but there are 3 more
-
You probably won’t use them
-
You probably don’t need them
-
You might "shoot yourself in the foot"
The Weird Ones
Here's what we're going to learn about today:
-
useDebugValue() -
useLayoutEffect() -
useImperativeHandle()
useDebugValue()
can be used to display a label for custom hooks in React DevTools
const useCustomHook = () => {
const [count, setCount] = useState(0);
useDebugValue(`My Count: ${count}`);
return [count, setCount];
};useDebugValue()
const useCustomHook = () => {
const [count, setCount] = useState(0);
useDebugValue(count, n => `My Count: ${n}`);
return [count, setCount];
};useDebugValue()
When are you going to use it?
-
custom hook (shareable)
-
label in React DevTools
-
value is expensive to derive
useDebugValue()
When are you going to use it?
-
custom hook (shareable)
-
label in React DevTools
-
value is expensive to derive
useLayoutEffect()
identical to useEffect, but it fires synchronously after all DOM mutations
useLayoutEffect(() => {
const body = document.body;
const originalStyle = getComputedStyle(body);
const origOverflow = originalStyle.overflow;
body.style.overflow = 'hidden';
return () => {
body.style.overflow = origOverflow;
};
}, []);useLayoutEffect()
useLayoutEffect()
When are you going to use it?
-
you are reading or writing to the DOM
-
you need to do something in a non-reacty way
-
you are having a problem
(like flickering or jank) when using useEffect()
useLayoutEffect()
When are you going to use it?
you are reading or writing to the DOM
you need to do something in a non-reacty way
you are having a problem
(like flickering or jank) when using useEffect()
useImperativeHandle()
customizes the instance value that is exposed to parent components when using ref
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);function FancyInput(props, ref) {
// const inputRef = useRef();
// useImperativeHandle(ref, () => ({
// focus: () => {
// inputRef.current.focus();
// }
// }));
return <input ref={ref} ... />;
}
FancyInput = forwardRef(FancyInput);const IDontUnderstandReact = (props, ref) => {
useImperativeHandle(ref, () => ({
DDAUisLame() {
console.log('Fuuuu');
},
sucksToYourProps() {
exec('rm -rf /');
}
}));
return <blink>React Sucks!</blink>;
};
forwardRef(IDontUnderstandReact)useImperativeHandle(ref, createHandle, [deps])useImperativeHandle()
When are you going to use it?
-
you don't really "like" React
-
Dan Abramov hurt you
-
you really want to do something you know you shouldn't but, com'on, you really want to
useImperativeHandle()
When are you going to use it?
-
you don't really "like" React
-
Dan Abramov hurt you
-
you really want to do something you know you shouldn't but, com'on, you really want to
What have we learned?
What exciting new hooks should you really not be using?
-
useDebugValue() -
useLayoutEffect() -
useImperativeHandle()
The Weird Ones
React Hooks:
Adam L Barrett
Questions?
React Hooks: The Weird Ones
By Adam L Barrett
React Hooks: The Weird Ones
React hooks offer a better way to add state and side effects to your components. The built-in hooks can be composed and combined to create rich, shareable interactions and behaviours. You may already know how and when to use useState() and useEffect(), but what about useImperativeHandle()? How about useLayoutEffect() or useDebugValue()?
