Заметки фром реакт документейшен | React: грабли, о которые я спотыкалась. Часть 1

[Fragster]

Статья хорошая. Пока остаюсь на Vue.

[Alexandroppolus]

React сначала выполняет все эффекты родителя, потом дочерние

Эффекты - наоборот, сначала дочерние. А вот рендер сначала выполняется родительский.

Бесконечный ререндер из-за useEffect видел в чуть более хитрой форме:

type Props = {arr?: string[]};

function Component({arr = []}: Props) {
  // ...

  useEffect(() => {
    // обновляем состояние
  }, [arr]);

  // ...
}

Если в такой компонент не передать проп arr, то будет бесконечный ререндер, потому что в arr попадает каждый раз новый пустой массив.

[Ingini]

Действительно очень хитрая форма. Спасибо!

[strannik_k]

Альтернатива: для сложного состояния используйте Redux.

Плохой совет. Все менеджеры состояний решают плюс минус одни и те же задачи, но redux и redux toolkit при этом всегда без необходимости сильно усложняют проект.

[Ingini]

А если у вас есть запросы к api? createSlice вроде неплохое решение? Я пока не знаю хороший подход, мои знания в этой области ограничиваются существовавшим до меня кодом, поэтому если у вас есть совет, я буду рада его получить!

[strannik_k]

createSlice, а не createApi? Если вы про createSlice, то в других менеджерах состояний (например mobx, zustand) обработка запросов к api в сторах делается меньшим количеством кода, кодом ближе к нативному, более простым и более легко переиспользуемым.

Многие так делают. Я же для запросов к api предпочитаю писать обёртку в отдельном слое, чтобы было легче переиспользовать код, не раздувать сторы, менять библиотеки при надобности. А для взаимодействия api и сторов предпочитаю использовать слой контроллеров. https://habr.com/ru/articles/546628/#api

https://habr.com/ru/articles/546628/#controller

Ну и большинство react-разработчиков сейчас используют библиотеки для кеширования данных запросов без использования стора - react-query (для него и swr можно прикрутить orval для генерации кода запросов к api), swr, rtk query. Но из-за того, что они сделаны через хуки, начинаются сложности, когда данные из кэша нужны в сторах. Да и в сложных кейсах усложняется разработка, т.к. приходится разбираться в разных тонкостях библиотеки. В одних проектах подобные библиотеки стоит использовать, а в других нет.

[Ingini]

Спасибо большое за пояснение. Да, я про createSlice. Про createApi не слышала, но обязательно изучу как и вашу статью