React Warning: Cannot update a component from inside the function body of a different component

Question

I am using Redux with Class Components in React. Having the below two states in Redux store.

{ spinner: false, refresh: false }

In Parent C

Answer 1

If your code calls a function in a parent component upon a condition being met like this:

const ListOfUsersComponent = ({ handleNoUsersLoaded }) => {
    const { data, loading, error } = useQuery(QUERY);

    if (data && data.users.length === 0) {
        return handleNoUsersLoaded();
    }

    return (
        

            
Users are loaded.
        
    );
};

Try wrapping the condition in a useEffect:

const ListOfUsersComponent = ({ handleNoUsersLoaded }) => {
    const { data, loading, error } = useQuery(QUERY);

    useEffect(() => {
        if (data && data.users.length === 0) {
            return handleNoUsersLoaded();
        }
    }, [data, handleNoUsersLoaded]);

    return (
        

            
Users are loaded.
        
    );
};