Tránh lỗi lặp vô hạn khi sử dụng useEffect
TIL
770
reactjs
58
White

henrynguyen6677 viết ngày 16/09/2020

Tránh bug sau: https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect

Cách 1: Chỉ cần truyền vào mảng [] để hàm useEffect() chạy đúng 1 lần.

function App() {
  const [currentUser, setCurrentUser] = useState({})

  useEffect(() => {
    console.log('Effect Trigger')
    async function getUser() {
      console.log('[getUser]')
      const user = await Auth.currentAuthenticatedUser()
      setCurrentUser(user)
    }
    getUser()
  }, []);
  //...render
}

Cách 2: Truyền thẳng props vào trong function và chỉ change trên 1 keys của props

function App(props) {
  const [currentUser, setCurrentUser] = useState(props.currentUser)

  useEffect(() => {
    console.log('Effect Trigger')
    async function getUser() {
      console.log('[getUser]')
      const user = await Auth.currentAuthenticatedUser()
      setCurrentUser(user)
    }
    getUser()
  }, [props.currentUser]);
  // ...render
}

Cách 3: Function parameter destructuring

function App({ current_user }) {
  const [currentUser, setCurrentUser] = useState(current_user)

  useEffect(() => {
    console.log('Effect Trigger')
    async function getUser() {
      console.log('[getUser]')
      const user = await Auth.currentAuthenticatedUser()
      setCurrentUser(user)
    }
    getUser()
  }, [current_user]);
  //...render
}

Tham khảo :
https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect
https://reactjs.org/docs/hooks-faq.html#performance-optimizations

henrynguyen6677 16-09-2020

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

henrynguyen6677

3 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 5
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết hơn 2 năm trước
0 5
White
4 0
I used Spring boot, Hibernate few times back then at University, I'v started using it again recently. In this (Link), I want to check how Spring J...
Rey viết gần 2 năm trước
4 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!