ReactJS

State Hook in React

State API in ReactJS

Hà Nội, những ngày đông lạnh, cũng sắp đến tết mọi người đi chơi, mua sắm còn mình ngồi đây và viết những dòng blogs này ^^. (Mình cũng không thích đi chơi lắm).

1. Mở đầu

Như ở phần trước mình có giới thiệu đến các bạn useContext một trong những Hooks được giới thiệu trong version 16.8 của React. Và ở phần này mình sẽ giới thiệu thêm về useState cũng như tại sao React Team lại release thêm feature này cho cánh Developer.

useState() là một trong những phần rất quan trọng được giới thiệu trong version 16.8 của React. useSate() được dùng để quản lý State bên trong một function component của React.

Note: Mỗi lần bạn set lại state thì function component sẽ lại chạy lại một lần, render lại 1 lần, cho nên mới sinh ra useRef() và useMemo(), mình sẽ giới thiệu hai concepts này sau.

2. Chi tiết

Syntax của nó như thế nào?

Syntax của UseState được giới thiệu đến gồm 3 phần đó là getter, setter và init, cụ thể bạn hãy xem ví dụ như ở dưới:

const [name, setName] = useState("chamdev.com");

Như các bạn có thể thấy như ví dụ bên trên thì chúng ta có getter là name variable. setter là setName và init là phần bên phải dấu bằng useState(initValue).

Cách dùng chi tiết như thế nào?

Đối với getter bạn chỉ cần gọi ra và dùng như bình thường, nó như làm một biến vậy nhưng nó không thể set lại giá trị ở đây, muốn set bạn phải thông qua setter.

Setter là phần mà bạn có thể set lại giá trị vào cho State, nó sẽ được dùng như ví dụ bên dưới:

setName("newName");
// or
setName(prevName => {
  console.log("prevName", prevName); // chamdev.com
  return "newName";
});

Phần init bên phải bạn có thể truyền Object, number, string, boolean, … nếu bạn không truyền mặc định nó sẽ là undefine. Nó chỉ được call 1 lần duy nhất khi khởi tạo component.

Một số mẹo khi dùng useState:

Đối với khi mà bạn muốn dùng lại giá trị bạn init nhiều lần. Như vậy mỗi lần dùng lại giá trị ban đầu bạn không cần viết lại nó nữa, phần công việc của bạn vì thế mà sẽ đỡ đi.

import React, {useState} from 'react';

const initInfo = {
  name: 'chamdev',
  address: 'https://chamdev.com'
};

export const App = () => {
  const [info, setInfo] = useState(initInfo);

  const handleChangeInput = (e) => {
    const tempInfo = {...info};
    tempInfo[e.target.name] = e.target.value;
    setInfo({...tempInfo});
  };

  const reset = () => {
    setInfo(initInfo);
  };

  return (
    <div>
      <div>
        <input
          id="name"
          name="name"
          onChange={e => handleChangeInput(e)}
          value={info.name}
        />
        {info.name}
      </div>
      <div>
        <input
          id="address"
          name="address"
          onChange={e => handleChangeInput(e)}
          value={info.address}
        />
        {info.address}
      </div>

      <button onClick={reset}>Reset info</button>
    </div>
  );
};

Còn đối với dạng State mà bạn xác định chỉ dùng một lần hoặc giá trị khởi tạo đơn giản như Empty String, number, boolean, … thì không cần thiết có biến để khởi tạo. Sau đây là ví dụ bạn có thể tham khảo.

import React, {useState} from 'react';

export const App = () => {
  const [name, setName] = useState("");
  const [users, getUsers] = useState(async () => {
    const users = await getUsers();
    return users;
  });

  const handleChangeInput = (e) => {
    setName(e.target.value);
  };

  const reset = () => {
    setName("");
  };

  return (
    <div>
      <div>
        <input
          onChange={e => handleChangeInput(e)}
          value={name}
        />
        {name}
      </div>

      <button onClick={reset}>Reset info</button>
    </div>
  );
};

So sánh State của class component và function component

Ở phần này mình sẽ show cho bạn xem hai cách viết Component với Function component và Class component, qua ví dụ này mình nghĩ bạn sẽ thích và dần chuyển sang Function component mỗi khi có cơ hội.

Đối với Class component:

import React from 'react';
export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        name: 'chamdev.com'
    };

    this.handleOnChange = this.handleOnChange.bind(this);
  }

  handleOnChange(e) {
        this.setState({ name: e.target.value });
  }

  render() {
    return (
        <div>
            <div>{this.state.name}</div>
            <input
                id="name"
                name="name"
                value={this.state.name}
                onChange={e => this.handleOnChange(e)}
            />
        </div>
    );
  }
}

Đối với Function component:

import React, { useState } from 'react';

const App = function (props) {
  const [name, setName] = useState("");

  const handleChangeInput = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <div>{name}</div>
      <input
        id="name"
        name="name"
        value={name}
        onChange={(e) => handleChangeInput(e)}
      />
    </div>
  )
}

export default App;

Note: Ở đây mình muốn chú ý cho các bạn thêm 1 điểm đó là đối với state của function component thì nó sẽ REPLACE luôn giá trị của state khi mà bạn set lại, còn riêng đối với class component thì lại là MERGE state.

3. Kết luận

Như các bạn đã thấy, việc sử dụng useState là rất hay và hiệu quả, nó là cho Function component trở nên mạnh mẽ hơn, code ngắn gọn dễ hiểu hơn. Như ở trong bài mình cũng đã cho bạn cách dùng cũng như một số điều lưu ý, mong rằng nó sẽ giúp bạn tiếp cận nhanh hơn với useState.

4. Tham khảo

# Using the State Hook
# Hooks API Reference
# Making Sense of React Hooks

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments