Why is this causing an infinite render loop?

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }

Why is this setIndex causing an infinite render loop? Maybe I'm forgetting React basics

TanStack•3y ago•

9 replies

ill-bronze

Why is this causing an infinite render loop?

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }

    const query = useQuery({queryKey: ["starter-products"], queryFn: getAllProducts});
    const [indexOfTargetProduct, setIndex] = useState(0);

    useEffect(() => {

    }, []);

    if (query.isLoading) return;
    if (query.isSuccess) {
        setIndex(() => query.data.findIndex(e => e.name === urlParams.itemName));
    }

Why is this setIndex causing an infinite render loop? Maybe I'm forgetting React basics

Why is this causing an infinite render loop?

Similar Threads

Why is this causing an infinite render loop?

Similar Threads

Similar Threads

Similar Threads