Предотвращение работы useEffect и вложенной в него функции?

Question

[Илья Коротков]

Доброго дня, уважаемые форумчане! Прошу вашей помощи в организации работы хука useEffect.
Имеется:

const [sortedAuthors, setSortedAuthors] = React.useState([]);

React.useEffect(() => {
    if (sortedAuthors !== []) {
      sortingAuthorsByFirstSymbol();
    }
  }, [sortedAuthors]);

function sortingAuthorsByFirstSymbol() {
    if (sortedAuthors) {
        let initialSymbol = sortedAuthors[0][0];
        ...
}

1. Стейт, при изменении которого должен срабатывать хук. Стейт меняется через обработку других стейтов, которая в свою очередь запускается по клику на кнопку.
2. Сам хук, внутрь которого я поместил условие if, чтобы он не вызывал вложенную функцию, когда стейт еще пустой - т.е. при загрузке страницы
3. Функция, в которую я тоже поместил условие if, чтобы она не отрабатывала, когда стейт пустой.

Проблема: и хук и функция чихать хотели на условную логику. Интерпретатор почему-то доходит до initialSymbol, далее ошибка с undefined.
Буду признателен за любой совет по решению проблемы. Архитектурные замечания тоже будут кстати - верна ли сама организация кода.

Comments

[WbICHA]

Имеется

И?

[Илья Коротков]

WbICHA, недопечатал вопрос. Теперь допечатал.

Answer 1

[Alexandroppolus]

1) if (sortedAuthors !== []) - это всегда true, потому что сравнивается по ссылке с вновь созданным объектом
2) если sortingAuthorsByFirstSymbol меняет sortedAuthors, то скорее всего схема работы здесь неправильная, лучше делать через useMemo

В остальном пока непонятно, что и как.

Comments

[Илья Коротков]

1)Точно! Я ж сравниваю с начальным значением стейта! Спасибо!
2) нет, функция только наполняет массив на основе стейта, который передается для отрисовки дочерних компонентов