Hooks Flashcards
useEffect() parameters?
useEffect() hook takes function as a parameter which is executed every time the dependency array changes
useEffect() syntax
useEffect(arrow function, [dependency variables])
make useEffect() call only once ?
useEffect(arrow function, [ ])
Having an empty dependency array makes an useEffect() call only once.
useEffect() to clean up
The arrow function in the useEffect() can return a function that can be used to clean up
useEffect() to make an API call
Call an API inside arrow function of useEffect() and give empty dependency array. So that API gets called only once.
useMemo() hook is used for ?
It is used to cache/memoize the output of a function( generally the long taking process)
useMemo() syntax?
useMemo syntax is similar to other hooks like useEffect().it takes a arrow function and a dependency array.
useMemo() example
const num = useMemo(()=>{return slowfunction(number)}, [number]) . when number changes the cache refreshes
how useEffect() triggers
useEffect() gets triggered every time the component renders or re-renders
how useState() works?
whenever the state(const num = useState() , if num) changes it causes the component to re-render
difference between refs and state
when the state changes it causes component to re-render while the change in the ref doesnot cause component to re-render
useRef() syntax
const num = useRef(0); it returns a object with current as property
usecase of useRef()
they are generally used to reference the elements in the HTML , it is also used to persist the value between re-renders.
what useCallback() does?
useCallback() is similar to useMemo().the difference is useMemo() caches/memoizes the value where as useCallback() caches the entire function
why useCallback() is used?
to check for referential equality
