Если roles по умолчанию задан как пустой массив прямо в параметрах компонента, что произойдёт с useEffect при каждом рендере? Как это исправить?

Если roles отсутствует и default задан как [], при каждом рендере создаётся новая ссылка; useEffect с зависимостью roles будет срабатывать снова.

Вынесите стабильный пустой массив за компонент или иначе стабилизируйте источник значения. Если родитель сам передаёт новый массив каждый раз, default не поможет. Бесконечный цикл возникнет лишь при соответствующем обновлении состояния в effect, а не от массива сам по себе.