Comments 13
Чем плох этот вариант?
useEffect(() => {
if(a > b){
// incorrect usage
}
}, [])
Не, тут логической ошибки нет, имеется ввиду вместо if (exp) {
do smth
}
Писать if (!exp) return
do smth
НО, почему так лучше - загадка дыры..
На самом деле ответ на загадку простой. Есть такая вещь, как guard (guard statement/expression/clause), которая предполагает, что стоит обрабатывать условия для пограничных случаев, а не для основных кейсов
В целом разницы со стороны выполнения кода почти никакого, но выглядит чуть логичнее и иногда даже покрасивше
Этот пример корректен, но лишняя вложенность мозолит глаза
В первом и втором примере раздела "Использование функций Async-Await в useEffect" не напутал ли автор с getUsers и getPosts ?
С эффектом главное соблюсти меру: https://beta.reactjs.org/learn/you-might-not-need-an-effect
useEffect(() => {
(async () => {
const {data} = await axios.get('api/posts')
setPosts(data)
})()
}, [])Я бы предпочел избавиться от такого количества скобок и писать например так:
useMountEffectAsync(async () => {
const {data} = await axios.get('api/posts')
setPosts(data)
})
Я бы предпочел избавиться от такого количества скобок и писать например так:
Фантазия на заданную тему:
function useMountEffectAsync(fn: (isAborted: () => boolean) => Promise<void>) {
useEffect(() => {
let isAborted = false;
fn(() => isAborted).catch(defaultAppErrorHandler);
return () => { isAborted = true; };
}, []);
}isAborted: () => boolean
Тогда уж стандартный AbortController, https://learn.javascript.ru/fetch-abort
побочный эффект в функции обратного вызова
Какой кошмарный канцелярит. Еще бы добавить «определенная путем осуществления передачи вторым значением подпрограммы для ПЭВМ».
Когда вы привыкнете к нему, вам захочется использовать его постоянно. Делитесь своим опытом в комментариях.
По своему опыту могу сказать, что желание использовать этот хук постоянно надо убивать на корню. Если компонент чуть сложнее, чем вот эти примеры со счётчиками, то сложность отладки кода с каждым useEffect растет экспоненциально. Особенно когда их зависимости приходят из вне (из родителей/из менеджера состояний/из другого кастомного хука и т.д.). Эти зависимости могут изменятся тоже неявно из какого нибудь внешнего useEffect, что в какой-то момент контролировать это невозможно. А если еще без тестов? А если кто-то вообще забыл или проигнорил предупреждения линтера и не указал все зависимости и построил на этом огромную фичу?
В общем, инструмент хороший, но опасный. По возможности, опасность нужно избегать
Продвинутые хуки в React: всё о UseEffect