không
s e nghe bác khuyên kiểu đừng học cấp 1, học thẳng cấp 2 đi. js là nền móng của reactjs, reactjs là nền móng của nextjs, k học th trước s biết th sau tnao mà làm.Nếu khong thích ReactJS có thể tham khảo NextJSNextJS sẽ là tương lai
Đúng r fences e nghe bác khuyên kiểu đừng học cấp 1, học thẳng cấp 2 đi. js là nền móng của reactjs, reactjs là nền móng của nextjs, k học th trước s biết th sau tnao mà làm.
e nhớ k nhầm react là library, angular là framework
rồi đọc mãi mà không hiểu thì phải làm sao, ông nghĩ ai cũng là senior học cái nào mới thì chỉ cần đọc docs là xong à
Vậy thì lên reddit hay voz mà hỏi
Tôi dev mấy năm trời ko lẽ ếu hiểu infinite loop là gì, rồi shallow compare của react là cái bỏ mẹ gì. So sánh t với gà à???Dell ai khuyên nên skip deps cả, đừng có dỗi hờn em chã như thế
Cái khuyên là nên chọn deps có tư duy, chứ ko phải xem doc+lint như bố, nó báo gì là nghe răm rắp
Cái tư duy khuyên người khác "Cứ làm theo docs tao bảo đi, còn có lỗi gì hay lặp vô tận thì là do mày code ngu" nghe có ỉa chảy ko cơ chứ...ko có nổi 1 lời giải thích.
Bác nào chưa rõ thì đọc thêm cái này thử
https://dmitripavlutin.com/react-useeffect-infinite-loop/
Lint nó đéo phân biệt đc primitive với object đâu, cứ máy móc lint fix cho lắm vào kiểu j cũng ăn quả crash browser
Tại sao ko nghĩ là viết code bt mà useEffect vẫn work chế ra chi useDeepEffect. Vì so sánh deep chậm nên cụ React ban đầu chỉ xài shallow compare là có lý do.
const { name, age } = {
name: "Linh",
age: 18,
};
useEffect(() => {
console.log(name, age);
}, [name, age]);react query thì làm dc nhiều chuyện hơn. Nhớ lần cuối ko xài swr do nó ít chức năng
Chuẩn ông, t review code gặp case auto fill vô deps cho chắc cú nhiều lắm rồiTại sao ko nghĩ là viết code bt mà useEffect vẫn work chế ra chi useDeepEffect. Vì so sánh deep chậm nên cụ React ban đầu chỉ xài shallow compare là có lý do.
Ví dụ có nhiều cách optimize
JavaScript:const { name, age } = { name: "Linh", age: 18, }; useEffect(() => { console.log(name, age); }, [name, age]);
Ví dụ object nó ko có memo vì shallow compare xài === thì destruct ra name or age mà so sánh
or so sanh object.name, object.age
Vâng vâng và vâng vâng nhiều khi chưa cần đụng useMemo.
Chưa kể viết component thì nên hạn chế xài object props.
ví dụ <User data={object} /> Nếu nó chỉ xài name với age thì <User name={obj.name} age={obj.age} /> Shallow compare age number với name string là quá đơn giản ko phải memo nữa. Nếu xài thêm React.Pure với componetn User nữa thì đãm bảo nó ko re render luôn. Đồng thời component User là độc lập, ko cần phải lo ngoay ngoái props data đã được memo chưa.
Có nhiều cách optimize deps, nhưng trước mắt phải học theo linter, doc thì mới ngộ ra nhưng cái như thế này. Tôi viết trên đây ban đầu chỉ dành cho jr thôi. Ai bỉ bôi tôi xài auto fill thì nên nhớ mấy anh pro sẵn rồi và k phải là đối tượng tôi hướng tới.
Trình tôi giờ tôi vẫn auto fill deps nhưng tôi nhìn vào là cái là biết cái thằng deps nào sẽ gây trouble để có kế sách đối phó. Chứ ếu phải fill vào để đó + ko test.
Mà chưa kể mấy anh thích tự điền thì tùy tôi lười gõ auto fill rồi sửa thêm xóa tý là xong đỡ type nhiều đỡ mỏi tay. Có khi mấy anh skip hết deps chứ bt ko lẽ ko gõ bất kì deps nào?
))
Chuẩn ông, t review code gặp case auto fill vô deps cho chắc cú nhiều lắm rồi
Cho m hỏi theo kn của fen thì sau khi autofill xong, những dep nào nên check lại để bỏ ra hoặc optimize nhỉ?Code cũ cty có nhiều đoạn ko optimize nên cái deps nó dài đằng đặc. Ko có linter mà tự điền tay thì rất dễ miss, trừ phi vừa code cái deps nào điền nó vào array ngay. Tôi thì style cứ viết hết logic trước rồi auto fill + sửa, sau đó check lại deps optimize này nọ, move bớt logic sang effect khác.
Nhiều khi task gấp ko có time suy nghĩ sâu xa nên đôi lúc tôi nghĩ bà con viết effect cb logic nhiều line xài nhiều deps là bình thường, mà nhiều xài nhiều deps tự fill tay, no linter thì miss rất dễ, gây ra bug, tech debt. Ai chửi viết code ngu, dài cũng đúng nhưng vs mỗi cty ngoài kia outsrc product khác nhau, chạy task cũng khác. Có cty 1 cái task cho nửa ngày, có cty cho 1 task có khi 2 3h.
Mà thôi tôi cũng srr kéo pic đi xa quá. Giải thích dài dòng, có lẽ skill communication ko dc tốt
Túm váy với jr thì eslint + auto fill là hint để điền cái gì, nhưng điền vô rồi thì phải test lại rồi học lý do tại sao cái dep no thay đổi ngoài mong muốn dẫn đến effect run nhiều lần or ko đúng mình mong muốn rồi tìm cách optimize. Xưa mới ra hook chửi thề suốt, nhưng làm theo linter rồi thì mới thấy nhiều cái mình ngu ko hiểu rồi học dần dần. Giờ ba cái effect deps như trò mèo.
Vì effect run shallow === nên string number thường khá an toan. Riêng function, array, object thì chú ý tiếp. Nếu đến từ lib khi khả năng 99.99% đã dc memo rồi nên cứ điền vào deps
import React from 'react';
import { useTranslation } from 'react-i18next';
export function MyComponent() {
const { t, i18n } = useTranslation();
// or const [t, i18n] = useTranslation();
return <p>{t('my translated text')}</p>
}function ABC() {
const object = .... = {
name: props.name,
age: Math.max(age, assumeAge),
}
// tinh toan o dau do moi ra dc object
// object2 inline
// BCD xài useEfffect với object và object2
return <BCD object={object} object2={{hello: "world"}} />
}const object2 = {hello: "world"}
function ABC() {
const object = useMemo(() => {
return {
name: props.name,
age: Math.max(age, assumeAge),
}
}, [props.name, age, assumeAge])
// BCD xài useEfffect với object và object2
return <BCD object={object} object2={object2} />
}Reply có tâm quá fen
. Vụ đc lưu trong memory ý là mấy cái đó đã đc memo? Còn mấy cái state lấy từ context mà dạng object thì thường m có cần phải memo ko nhỉ?
// useCallback rồi đem xuống component props khác or useEffect
function abc() {
return props.ax + state.ab;
}function ABC(props) {
const [state, setState] = useState(1);
useEffect(() => {
if(props.isBehind) {
setState(state + 1)
}
}, [state, props.isBehind])
}function ABC(props) {
const [state, setState] = useState(1);
useEffect(() => {
if(props.isBehind) {
setState((prev) => {return prev + 1})
}
}, [props.isBehind])
}state từ context thì context nó cũng lấy từ props or state thôi or tính toán ở đâu đó. Nên nếu Provider mà re render mấy cái value ko dc memo, lưu trong state thì thằng con năm dưới cũng chạy Effect lại theo.Reply có tâm quá fen
// nằm ngoài function gọi tạo provider nên đã dc memo
const listLanguages = ['a', 'b']
<LanguageContext.Provider
value={{
listLanguages: listLanguages,
// string
currentLang,
// cb đã dc memo
changeLanguage,
// cb đã dc memo
translate,
}}
bởi vậy mới hình thành kĩ năng tự research, học cho lắm vào rồi mai mốt ko biết tự research cứ lên mạng hỏi, nhiều đứa còn ko chịu đọc docs mà đã đi hỏi tùm lum, ko double check, toàn mấy cái skill cơ bản này làm đéo nào có khóa học nào dạy?
tôi cũng vậy, tôi ít khi dùng useMemo cho lắm, bần cùng lắm mới dùng, đa số là destruct field trong obj ra hoặc bỏ nguyên cái obj đó vô state là hết renderTại sao ko nghĩ là viết code bt mà useEffect vẫn work chế ra chi useDeepEffect. Vì so sánh deep chậm nên cụ React ban đầu chỉ xài shallow compare là có lý do.
Ví dụ có nhiều cách optimize
JavaScript:const { name, age } = { name: "Linh", age: 18, }; useEffect(() => { console.log(name, age); }, [name, age]);
Ví dụ object nó ko có memo vì shallow compare xài === thì destruct ra name or age mà so sánh
or so sanh object.name, object.age
Vâng vâng và vâng vâng nhiều khi chưa cần đụng useMemo.
Chưa kể viết component thì nên hạn chế xài object props.
ví dụ <User data={object} /> Nếu nó chỉ xài name với age thì <User name={obj.name} age={obj.age} /> Shallow compare age number với name string là quá đơn giản ko phải memo nữa. Nếu xài thêm React.Pure với componetn User nữa thì đãm bảo nó ko re render luôn. Đồng thời component User là độc lập, ko cần phải lo ngoay ngoái props data đã được memo chưa.
Có nhiều cách optimize deps, nhưng trước mắt phải học theo linter, doc thì mới ngộ ra nhưng cái như thế này. Tôi viết trên đây ban đầu chỉ dành cho jr thôi. Ai bỉ bôi tôi xài auto fill thì nên nhớ mấy anh pro sẵn rồi và k phải là đối tượng tôi hướng tới.
Trình tôi giờ tôi vẫn auto fill deps nhưng tôi nhìn vào là cái là biết cái thằng deps nào sẽ gây trouble để có kế sách đối phó. Chứ ếu phải fill vào để đó + ko test.
Mà chưa kể mấy anh thích tự điền thì tùy tôi lười gõ auto fill rồi sửa thêm xóa tý là xong đỡ type nhiều đỡ mỏi tay. Có khi mấy anh skip hết deps chứ bt ko lẽ ko gõ bất kì deps nào?
Thằng cha này chuyên gia đặt title click bait. Ghét
