[FIX] Non primitive dependency on useSubscriptionRoles (#4618)

* [FIX] Non primitive dependency on useSubscriptionRoles

* removed sort

* Remove JSON.parse and order by array

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/lib/hooks/usePermissions.ts

@@ -1,8 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { dequal } from 'dequal';
 import { Subscription } from 'rxjs';
 import { createSelector } from 'reselect';
 import { shallowEqual } from 'react-redux';
+import { orderBy } from 'lodash';
 
 import { TSupportedPermissions } from '../../reducers/permissions';
 import { IApplicationState, TSubscriptionModel } from '../../definitions';
@@ -17,6 +18,7 @@ const getPermissionsSelector = createSelector(
 
 const useSubscriptionRoles = (rid?: string): TSubscriptionModel['roles'] => {
 	const [subscriptionRoles, setSubscriptionRoles] = useState<TSubscriptionModel['roles']>([]);
+	const subscriptionRoleRef = useRef<TSubscriptionModel['roles']>([]);
 
 	useEffect(() => {
 		if (!rid) {
@@ -29,16 +31,20 @@ const useSubscriptionRoles = (rid?: string): TSubscriptionModel['roles'] => {
 			}
 			const observable = sub.observe();
 			subSubscription = observable.subscribe(s => {
-				if (!dequal(subscriptionRoles, s.roles)) {
-					setSubscriptionRoles(s.roles);
+				const newRoles = orderBy(s.roles);
+				if (!dequal(subscriptionRoleRef.current, newRoles)) {
+					subscriptionRoleRef.current = newRoles;
+					setSubscriptionRoles(newRoles);
 				}
 			});
 		});
 
 		return () => {
-			if (subSubscription && subSubscription?.unsubscribe) subSubscription.unsubscribe();
+			if (subSubscription && subSubscription?.unsubscribe) {
+				subSubscription.unsubscribe();
+			}
 		};
-	}, [subscriptionRoles]);
+	}, []);
 
 	return subscriptionRoles;
 };