useState

Question 1

useState là gì?

Answer 1

useState là một React Hook cho phép người dùng thêm một “state variable” vào component.

const [state, setState] = useState(initialState)

Question 2

Parameters của useState

Answer 2

const [state, setState] = useState(initialState)

Khi chuyền giá trị initialState vào hàm thì nó được xem như là một hàm khởi tạo. Và tránh chuyền một hàm vào initialState bởi vì nó chỉ được hiển thị ở lần render đầu tiên (lãng phí).

Question 3

useState trả về gì?

Answer 3

useState trả về một mảng với hai giá trị:
- Current state (Trong lần render đầu tiền thì nó chính là giá trị của initialState được chuyền vào.
- Set function (Nó sẽ update giá trị cho state và re-render).

Question 4

Lưu ý về useState

Answer 4

useState là một Hook nên bạn chỉ có thể gọi nó “at the top level of your component or your own Hooks”. Không thể gọi useState bên trong loops hay conditions (Nếu muốn thì tạo một component khác và khởi tạo useState đó).

Question 5

Set function của useState là gì?

Answer 5

The set function returned by useState lets you update the state to a different value and trigger a re-render. Có thể truyền vào một state tiếp theo hay pass vào một hàm calculates dựa trên state trước đó.

const [name, setName] = useState(‘Edward’);

function handleClick() {
setName(‘Taylor’);
setAge(a => a + 1);
}

Question 6

Set function của useState hoạt động như thế nào?

Answer 6

The set function of useState only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call. —-> Nó không cập nhật lại giá trị hiện tại của state cho đến lần render tiếp theo.

Question 7

Prompt

Để cập nhật nội dung trên màn hình thì phải làm như thế nào?

Answer 7

Gọi hàm set function của useState với next state.