meomatxi
Member
keywork: stale state nhé aeVới function thì nếu thuần pure function ko liên quan state, props, sideEffect thì move ra ngoài.
còn function mà phụ thuộc vào deps thì tốt nhất nên useCallback
JavaScript:// useCallback rồi đem xuống component props khác or useEffect function abc() { return props.ax + state.ab; }
Có 1 cái trick để giảm dep đó là setState của react nhận vào function
JavaScript:function ABC(props) { const [state, setState] = useState(1); useEffect(() => { if(props.isBehind) { setState(state + 1) } }, [state, props.isBehind]) }
Ví dụ code này ai chạy chắc useEffect nó loop sml luôn. Vì mục tiêu của code chỉ là khi props.isBehind true thì state + 1; Nhưng nếu viết trên kia thì loop. Vì state dổi sẽ trigger lại function.
Mà nếu đổi bỏ state ra khỏi dep effect thì sẽ bị linter chửi. Tức quá ignore nó cũng ok nhưng có 1 đoạn code khác cập nhật state rồi thì state nằm trong Effect sẽ bị outdate dẫn đến state + 1 sai.
JavaScript:function ABC(props) { const [state, setState] = useState(1); useEffect(() => { if(props.isBehind) { setState((prev) => {return prev + 1}) } }, [props.isBehind]) }
Sủa lại setState xài function là xong.
Ở đây linter chỉ nhắc nhở mình thôi, còn code theo nó sẽ ko chắc đúng 100% (thực ra cũng đúng vì đòi xài state tron effect mà, lý thuyết nó ko sai) , cái này phải tập luyện
))

Để hôm nào ngó lại xem tại sao lại cần dùng




