Loading Thucde.dev
Preparing the next view.
1 min read
A single line of code can cause your React component to loop indefinitely

const filters = [selectedValue]
filters is used inside a dependency array of useEffect or useCallback…[1] === [1] // false {} === {} // false
const filters = [selectedValue]
selectedValue hasn’t changed,
the reference is different.const filters = [selectedValue] const fetchData = useCallback(() => { dispatch({ filters }) }, [filters]) useEffect(() => { fetchData() }, [fetchData])
{} [] () => {}
useMemo:const filters = useMemo(() => { return [selectedValue] }, [selectedValue])