We've got a pretty simple User class component that manages a bit of state and uses some context. Let's refactor this over to a function component that uses the useContext
and useState
hooks.
why did we not use something like onUpdate={() => setFilter(filter)}
why did we not use something like onUpdate={() => setFilter(filter)}
Where would filter
come from in that case? Go ahead and try it and see what happens 😀
While looking at the example code on github I've noticed that on this lesson's branch something was added to the Query
component. Namely:
function useDeepCompareEffect(callback, inputs) {
const cleanupRef = useRef()
useEffect(() => {
if (!isEqual(previousInputs, inputs)) {
cleanupRef.current = callback()
}
return cleanupRef.current
})
const previousInputs = usePrevious(inputs)
}
I'm curious why you need to do it this way? Would't just running callback if the condition is met fit the bill? Why the cleanupRef
?
Thanks for the course Kent. I came to this lesson to make the same comment as Alex. Wouldn't something like below do the same?
function useDeepCompareEffect(callback, inputs) {
let cleanup
useEffect(() => {
if (!isEqual(previousInputs, inputs)) {
cleanup = callback()
}
return cleanup
})
const previousInputs = usePrevious(inputs)
}