React.useMemo is re-rendering all items in array
I have a react component that stores a set of fruits in useState. I have a memoized function (visibleFruits) that filters fruits. I map visibleFruits to the dom.
react-usememo
Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant
I’m getting markers when location is entered by the user, and the markers list is then provided to the Google Maps component. Since I don’t want the map to re-render everytime, I have memoized it. It only re-renders when the markers props changes. But when markers changes, I get the following warning:
What are production use cases for the useRef, useMemo, useCallback hooks?
Outside of the counter example seen in many YouTube tutorial videos, what are practical/real-world use cases for useMemo and useCallback?
React.useMemo in class component
Is there a way to use this hook or some its analogue of the React API in the case of a class component?