Infinite loop useEffect with useSelector

Question

// get state
const { inscriptions } = useSelector( state => state.user );

// flag
const instances = Object.keys(inscriptions).length;

// dispatch
const dispatch = useDispatch();

const getInscriptions = () => dispatch( getInscriptionsAction() );

useEffect( () => {
    // call api only if empty
    if(instances === 0) {
        const queryToAPI = async () => {
            getInscriptions();
        }
        
        queryToAPI();
    }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ instances, inscriptions ]);

My problem is, whenever i call the API inside de useEffect that forces a store update, which makes the component to re-render and thus initiating the infinite loop. I can't either put something like if(isntances === 0) return null; or so below useEffect becouse my inscriptions array CAN be empty i tried adding all kind of flags but it keeps infinite looping. Any ideas?

==================EDIT================================ Okay now I've implemented some suggestions, but the problem still remains, the infinite loop stills.

// get state
const { inscriptions } = useSelector( state => state.user );

// flag
const instances = Object.keys(inscriptions).length;

// dispatch
const dispatch = useDispatch();

// const getInscriptions = () => dispatch( getInscriptionsAction() );

const getInscriptions = useCallback(
    () => dispatch( getInscriptionsAction() ),
    [ dispatch, getInscriptionsAction ]
);

useEffect( () => {
    // call api only if empty
    if(instances === 0) {
        // const queryToAPI = async () => {
            getInscriptions();
        // }
        
        // queryToAPI();
    }
    
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ ]);

Answer 1

Okay, I figure it out, one of my types in the Reducer rested de inscriptions to and empty array, so it was re-rendering infinitely.