[React] Những điều có thể bạn chưa biết về Function Component

Nội dung bài viết gồm các phần sau:

• Function Component là gì?
• Function Component có props không?
• Function component và sức mạnh đến từ React Hook

Function component là gi?

Function component là React Component được viết bằng Pure Function. Dễ hiểu hơn thì nó được viết theo dạng sau:

export function Counter() {
  return <div>count</div>;
}

Function Component có props không?

Có bạn sẽ đặt câu hỏi sau khi nhìn thấy cách viết trên, Function Component có props không? Câu trả lời là có. Bạn có thể truyền props cho component như sau:

import React from 'react';

export function Counter(props) {
  return <div>{props.count}</div>;
}

Và bạn vẫn có thể khai báo propTypes cho component như bình thường

Counter.propTypes = {
  count: PropTypes.number
};

Mọi thứ đều ổn đến lúc này và có lẽ bạn cũng có nghe ai đó nhắc đến Stateless component. Có thể bạn cũng nghe ai đó nói Function Component là Stateless component. Vậy thì Function component có thực sự là Stateless không?

Function component và sức mạnh đến từ React Hook

Trước khi React Hooks ra đời, Function component thực sự là Stateless component. Đơn giản bởi bạn chẳng có cách nào thêm state cho nó cả. Function component khi đó chỉ có thể được dùng để render HTML với props truyền vào mà thôi.

Khi React Hooks ra đời thì lại là câu chuyện khác. Function component có thể có state của riêng nó. Vậy làm sao để thêm state cho Function component? Với useState bạn có thể thêm state cho nó.

Thay đổi một chút đoạn source code bên trên như sau là Functiona component của bạn đã support state rồi đấy.

import React, { useState } from 'react';
import PropTypes from 'prop-types';

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

  return (
    <div>
      <button onClick={() => setCount(count - 1)}>-</button>
      {count}
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Counter.propTypes = {
  count: PropTypes.number
};