The Weird Ones

React Hooks:

No notes on this slide.

The Weird Ones React Hooks:

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()?

6 years ago
1,381

Adam L Barrett PRO

Adam L Barrett is a JavaScript and Front-End consultant, a contributor to open source, and avid bike-shedder.

adamlbarrett.com
adamlbarrett


	const useCustomHook = () => {
	const [count, setCount] = useState(0);

	useDebugValue(`My Count: ${count}`);

	return [count, setCount];
	};


	const useCustomHook = () => {
	const [count, setCount] = useState(0);

	useDebugValue(count, n => `My Count: ${n}`);

	return [count, setCount];
	};


	const useCustomHook = () => {
	const [count, setCount] = useState(0);

	useDebugValue(count, n => `My Count: ${n}`);

	return [count, setCount];
	};

	useLayoutEffect(() => {
	const body = document.body;
	const originalStyle = getComputedStyle(body);
	const origOverflow = originalStyle.overflow;

	body.style.overflow = 'hidden';

	return () => {
	body.style.overflow = origOverflow;
	};
	}, []);

	function FancyInput(props, ref) {
	const inputRef = useRef();
	useImperativeHandle(ref, () => ({
	focus: () => {
	inputRef.current.focus();
	}
	}));
	return <input ref={inputRef} ... />;
	}
	FancyInput = forwardRef(FancyInput);

The Weird Ones

React Hooks:

Built In Hooks:

...but there are 3 more

The Weird Ones

What have we learned?

The Weird Ones

React Hooks:

React Hooks: The Weird Ones

React Hooks: The Weird Ones

Adam L Barrett PRO

	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)

The Weird Ones

React Hooks:

React Hooks: The Weird Ones

More from Adam L Barrett