Custom Hooks in React: The Ultimate UI Abstraction Layer - Tanner Linsley | JSConf Hawaii 2020
Why Stack Overflow recommends it
Stack Overflow users link it when answering how to write reusable hooks, especially the common "detect click outside a React component" question, where answers base their useOuterClick implementations on the talk.
Recommended by 2 people across 2 different months, 2019 to 2024.
What it is
A JSConf Hawaii 2020 conference talk by Tanner Linsley (creator of React Query) on using custom React hooks as a full abstraction layer. It goes beyond simple local state to cover memoization pipelines, chained effects, and managing local and network resources.
What people said
Strong rec ford04 · 2019-01 · Stack Overflow · on “Detect click outside React component”
Hook implementation based on Tanner Linsley's excellent talk at JSConf Hawaii 2020 [this video] : useOuterClick API const Client = () => { const innerRef = useOuterClick(ev => {/*event handler code on outer click*/}); return <div ref={innerRef}> Inside </div> }; Implementation function useOuterClick(callback) { const callbackRef = useRef(); // initialize mutable ref, which stores callback const innerRef = useRef(); // returned to client, who marks "border" element // update cb on each render, so second useEffect has access to current value useEffect(() => { callbackRef.current = callback; }); useEffect(() => { document.addEventListener("click", handleClick); return () => document.removeEventListe
Strong rec Rodrigo · 2020-11 · Stack Overflow · on “react custom hooks vs normal functions, what is the difference”
I believe no one has answered your question exactly. I'm still also understanding the benefits and purpose of having this extra feature called hooks, but I can still share my understanding. React Hooks are JS functions with the power of react, it means that you can add some logic that you could also add into a normal JS function, but also you will be able to use the native hooks like useState, useEffect, etc, to power up that logic, to add it state, or add it side effects, memoization or more. So I believe hooks are a really good thing to manage the logic of the components in a isolated way. So, you could have a foo.component.js (UI), a useFoo.js(logic), where useFoo will contain maybe many
Cites Géry Ogam · 2024-01 · Stack Overflow · on “Detect click outside React component”
Here is a TypeScript version inspired from Tanner Linsley’s talk at JSConf Hawaii 2020 [this video] : import { MutableRefObject, useEffect, useRef } from 'react'; export function useClickOutside( elementRefs: MutableRefObject<HTMLElement | null>[], callback: (event: MouseEvent) => void ): void { const callbackRef = useRef(callback); callbackRef.current = callback; useEffect(() => { const handleClickOutside = (event: MouseEvent): void => { const target = event.target; if ( !(target instanceof Node) || elementRefs.every((elementRef) => !elementRef.current?.contains(target)) ) { callbackRef.current?.(event); } }; document.addEventListener('click', handleClickOutside, true); return () => document.rem