Háčky jsou nezbytné pro vzor funkčních komponent v Reactu. Jedno časté srovnání logiky s class
komponenty porovnával předchozí prop
hodnotu s aktuálním prop
hodnotu prostřednictvím metod životního cyklu. Jaký je tedy snadný vzor pro duplikování předchozích srovnání hodnot ve funkčních komponentách?
useRef
a useEffect
háčky nám umožňují spravovat stejnou funkcionalitu ve funkčních komponentách pomocí vlastního háku -- usePrevious
:
import { useEffect, useRef } from 'react'; export function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } // Usage export function MyComponent(props) { const { name } = props; const previousName = usePrevious(name); if(name != previousName) { // Do something } }
Líbí se mi tento usePrevious
hák, už jen proto, že často zapomínám použít .current
vlastnost a pomáhá vyhnout se nějakému standardnímu kódu. Jaký je váš názor na tento vzor? Máte nějaké vlastní háčky, na které spoléháte?