Hooks trong React Native: cách dùng logic trong function component

Khi học React Native hiện đại, bạn sẽ gặp hooks rất sớm. Hooks là các hàm đặc biệt giúp function component dùng được những khả năng của React như state, effect, context, memoization và nhiều logic khác.

Nói đơn giản: hooks giúp component không chỉ “hiển thị UI”, mà còn có thể ghi nhớ dữ liệu, phản ứng với thay đổi và tái sử dụng logic.

Hooks là gì?

Hooks là những hàm bắt đầu bằng chữ use, ví dụ useState, useEffect, useMemo, useCallback, useRef. Hai hook người mới nên học đầu tiên là useState và useEffect.

import { useState } from 'react';
import { Button, Text, View } from 'react-native';

function LikeButton() {
  const [liked, setLiked] = useState(false);

  return (
    <View>
      <Text>{liked ? 'Đã thích' : 'Chưa thích'}</Text>
      <Button title="Đổi trạng thái" onPress={() => setLiked(!liked)} />
    </View>
  );
}

Trong ví dụ này, useState cho component một state tên là liked. Khi người dùng bấm nút, state đổi và UI render lại.

Vì sao hooks quan trọng?

Trước đây React dùng class component cho nhiều tính năng như state và lifecycle. Với hooks, bạn có thể viết function component gọn hơn, dễ tách logic hơn và phù hợp với cách React hiện đại đang phát triển.

Trong React Native, hooks xuất hiện ở khắp nơi: quản lý state form, gọi API, đọc kích thước màn hình, theo dõi app state, xử lý navigation focus, đọc theme và nhiều tác vụ khác.

Quy tắc dùng hooks

Có hai quy tắc quan trọng. Thứ nhất, chỉ gọi hooks ở cấp cao nhất của component hoặc custom hook. Đừng gọi hook bên trong if, for, callback lồng sâu hoặc function bình thường.

Thứ hai, chỉ gọi hooks trong React function component hoặc custom hook. Custom hook cũng là function, nhưng tên phải bắt đầu bằng use.

// Nên
function ProfileScreen() {
  const [name, setName] = useState('Nam');
  return <Text>{name}</Text>;
}

// Không nên
function ProfileScreen({ enabled }) {
  if (enabled) {
    const [name, setName] = useState('Nam');
  }
}

Custom hook là gì?

Khi một đoạn logic được dùng lại ở nhiều component, bạn có thể tách nó thành custom hook. Ví dụ logic bật/tắt boolean:

import { useState } from 'react';

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);

  const toggle = () => setValue(current => !current);

  return { value, toggle };
}

Sau đó component có thể dùng useToggle mà không cần lặp lại logic state.

Người mới nên học hook nào trước?

Hãy bắt đầu với useState để hiểu UI thay đổi theo dữ liệu. Tiếp theo học useEffect để hiểu các tác vụ bên ngoài render như gọi API hoặc lắng nghe sự kiện. Sau đó mới học useRef, useMemo, useCallback khi thật sự gặp nhu cầu.

Đừng học hook theo kiểu thuộc lòng danh sách. Hãy học theo vấn đề: cần ghi nhớ dữ liệu thì dùng useState, cần chạy tác vụ sau render thì tìm hiểu useEffect, cần giữ một giá trị không làm render lại thì xem useRef.

Lỗi thường gặp

Lỗi đầu tiên là gọi hook có điều kiện. Lỗi thứ hai là dùng useMemo và useCallback quá sớm dù chưa có vấn đề performance. Lỗi thứ ba là nhồi quá nhiều logic vào một component thay vì tách thành custom hook hoặc component nhỏ hơn.

Kết luận

Hooks là cách React hiện đại đưa logic vào function component. Với React Native, chỉ cần hiểu chắc useState và useEffect là bạn đã có thể xây được nhiều màn hình thực tế. Các hook nâng cao nên học sau, khi bạn đã gặp vấn đề thật.

Nguồn tham khảo: React Hooks Reference, Reusing Logic with Custom Hooks.