Custom hook là gì? So với HOC và render props thì sao?

function useDebounce(value, ms = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setV(value), ms);
    return () => clearTimeout(id);
  }, [value, ms]);
  return v;
}

Custom hook chia sẻ logic, không chia sẻ state: hai component gọi useDebounce có hai state độc lập.

Cách	Nhược điểm
HOC withAuth(Comp)	Wrapper lồng nhau, xung đột tên props, khó type
Render props	Callback lồng sâu (JSX hell)
Custom hook	Chỉ tái dùng logic, không tái dùng markup