Truyền function cho setState thay vì truyền object

Component trong React là một thành phần độc lập, tái sử dụng được và chúng thường mang trạng thái riêng của chính mình, gọi là state. Khi muốn thay đổi hành vi hay hiển thị của component, chúng ta phải thay đổi state của chúng. Vậy làm thế nào để update state của một component? Trong React, mỗi component có một method là setState dùng để update lại state của chúng. Mỗi khi gọi method này, React sẽ re-render lại componennt và update lại DOM.

Thông thường, khi muốn update state, chúng ta chỉ việc gọi setState rồi truyền cho nó một object chứa dữ liệu mới cần update, ví dụ: this.setState({someField: someValue}) Tuy nhiên, có những trường hợp chúng ta cần update lại state mới dựa trên giá trị của state hiện tại, thì cách trên lại có một vấn đề. Theo như document của React:

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

Thì setState là bất đồng bộ. Khi setState được gọi, React ko cập nhật DOM ngay lập tức mà nó tổng hợp lại các thay đổi rồi update thành từng mẻ để tăng hiệu năng cho việc re-render DOM.

Ví dụ

Mình có một feedback form, sau khi người dùng submit feedback thì form sẽ chuyển sang dạng một message với nội dung cám ơn. Component cho trang feedback có một trường boolean là showForm, nếu là true thì sẽ hiển thị form, còn false thì sẽ hiển thị message. State ban đầu của form sẽ có dạng như sau:

this.state = { showForm : true}

Sau khi người dùng bấm nút submit, mình gọi hàm sau:

submit(){
  this.setState({showForm : !this.state.showForm});
}

Mình đang sử dụng giá trị của this.state.showForm để update lại state của form. Trong ví dụ đơn giản này, có thể chúng ta chưa gặp phải vấn đề gì, tuy nhiên, khi khi ứng dụng trở lên phức tạp hơn nhiều và có nhiều nơi gọi đến setState, có khả năng, giá trị của this.state.showForm sẽ không phải thứ mà bạn nghĩ.

Truyền fuction cho setState

Thay vì truyền một object vào this.setState, chúng ta có thể truyền vào một function để lấy giá trị hiện tại của state một cách đáng tin cậy hơn. Đoạn code trên có thể viết lại thành:

submit(){
   this.setState((prevState, props) => {
      return {showForm: !prevState.showForm}
   });
}

Việc truyền function vào setState thay vì truyền object sẽ đảm bảo giá trị của state và props luôn đúng như những gì mà chúng ta expect. Nếu bạn định sử dụng setState để update component và bạn định dựa trên giá trị hiện tại của state hay props để tính toán ra giá trị mới thì việc truyền function vào setState như trên luôn là một cách nên dùng.

Source: https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1