React Hooks Flashcards
Why or when do we need to use useRef ?
if you need to interact with the actual DOM (as opposed to the React virtualization of it) directly. This is pretty rare and really only when you need to derive measurements from the DOM (like width) or you’re using an external library and it needs a real DOM node to interact with.
What is the purpose of React.Memo ?
React.memo tells React “as long as the parameters being passed into this component don’t change, do not re-render it ever.
When would you need to use useReducer ?
if you have complex state updates or if you have a situation like this: all of the state updates are very similar so it makes sense to contain all of them in one function.
Name two hooks which are used for performance optimizations
useMemo and useCallback
Use them only when you already have a performance problem instead of pre-emptively. It adds unnecessary complexity otherwise. Which two react hooks are we talking about here ?
useMemo and useCallback
Complete the sentence —- Typically whenever React detects a change higher-up in an app, ….
it re-renders everything underneath it.
What is the purpose of React.PureComponent ?
a component will do a simple check on its props to see if they’ve changed and if not it will not re-render this component (or its children, which can bite you.)
Difference between React.PureComponent and React.Memo /useMemo hook ?
React.memo provides this functionality ( React.PureComponent check) for function components.
What is the difference between useEffect and useLayoutEffect ?
useLayoutEffect is almost the same as useEffect except that it’s synchronous to render as opposed to scheduled like useEffect is. useLayoutEffect runs at the same time as componentDidMount and componentDidUpdate whereas useEffect is scheduled after.
When should we use useLayoutEffect hook ?
to measure DOM nodes for things like animations
What is the purpose of useId hook ?
when you need unique identifiers to associate two objects together. An example of this would be making sure a label and an input are associated together by the htmlFor attribute.
