Trong phiên bản react 16.8 đã thêm tính năng hook (React Hooks). Cho phép chúng ta có thể dễ dàng sử dụng state và nhiều cái khác mà không cần phải khai báo class.

Sử dụng State Hook

Ví dụ với state hock để thực hiện 1 đoạn chương trình đếm số lần click vào button chúng ta viết như sau:

import React, { useState } from 'react';

function Example() {
  //Khai báo một biến trạng thái mới, đặt tên là là "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Còn đây trường hợp sử dụng class Component và state như trước đây:

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

State của biến count được khởi tạo giá trị là 0. Khi click vào button thì hàm setState sẽ được gọi và tăng biến count +1.

Sử dụng Effect Hook

Effect Hook cho phép chúng ta thực hiện các thay đổi của  function component. Nó tương tự xảy ra khi function khởi tạo hoặc được thay đổi state, tương tự như componentDidMount, componentDidUpdate.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Quy tắc khi sử dụng Hock

  • Chỉ sử dụng Hocks ở thành phần cao nhất của React function. Không sử dụng trong các vòng lặp, điều kiện hoặc các function lồng nhau.
  • Chỉ sử dụng Hocks ở thành phần của React function hoặc custom Hocks nào đó, không sử dụng Hocks trong phần javascript thường.

Sử dụng ESLint Plugin để check lỗi

npm install eslint-plugin-react-hooks --save-dev
// Your ESLint configuration
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  }
}

Xem thêm: So sánh sự khác nhau giữa redux và react hooks

Bonus: Nếu bạn cần hỏi gì thì có thể tham gia vào group chat React trên Telegram: https://t.me/reactvn