Hooks là một trong những tính năng quan trọng và mạnh mẽ nhất trong hệ sinh thái React Native. Nếu bạn đang tìm cách nâng cao hiệu quả lập trình, tối ưu hóa hiệu suất ứng dụng và viết mã sạch hơn, việc nắm vững Hooks là bước đi không thể thiếu.

Trong bài viết này, chúng ta sẽ đi thẳng vào trọng tâm: hiểu và áp dụng các Hook phổ biến nhất gồm useState, useEffect, useMemo và useCallback trong React Native.

1. useState – Quản lý trạng thái trong component

useState cho phép bạn khai báo state ngay trong một functional component. Đây là điểm khác biệt lớn so với cách sử dụng this.state trong class component trước đây.

Cách sử dụng:

import React, { useState } from 'react';

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

export default function Counter() {

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

 return (

  <View>

    <Text>{count}</Text>

    <Button title="Tăng" onPress={() => setCount(count + 1)} />

  </View>

 );

}

Giải thích:

useState(0) khởi tạo giá trị ban đầu của count là 0.

setCount là hàm dùng để cập nhật giá trị count.

useState giúp functional component linh hoạt hơn, dễ dàng mở rộng và duy trì.

2. useEffect – Xử lý side effects

useEffect được dùng để xử lý các tác vụ như fetch dữ liệu, đăng ký sự kiện, hoặc thay đổi DOM (nếu cần thiết).

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

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

export default function Timer() {

 const [seconds, setSeconds] = useState(0);

 useEffect(() => {

  const interval = setInterval(() => {

   setSeconds(prev => prev + 1);

  }, 1000);

 return () => clearInterval(interval);

 }, []);

return (

  <View>

  <Text>Thời gian: {seconds} giây</Text>

 </View>  

 );

}

Giải thích:

useEffect với dependency array [] sẽ chạy một lần khi component mount.

Hàm return trong useEffect là cleanup function, rất cần thiết để tránh rò rỉ bộ nhớ.

Nếu bạn đang xây dựng ứng dụng có nhiều yêu cầu tương tác với server hoặc sự kiện thời gian thực, useEffect là công cụ không thể thiếu.

3. useMemo – Tối ưu hóa hiệu suất tính toán

useMemo giúp ghi nhớ kết quả của một phép tính phức tạp, chỉ tính lại khi dependencies thay đổi. Điều này cực kỳ quan trọng với các ứng dụng cần tối ưu hóa tốc độ.

Cách sử dụng:

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

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

export default function ExpensiveCalculation() {

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

 const [other, setOther] = useState(false);

 const expensiveValue = useMemo(() => {

  let result = 0;

  for (let i = 0; i < 100000000; i++) {

    result += i;

  }

  return result + count;

 }, [count]);

 return (

  <View>

   <Text>Tính toán: {expensiveValue}</Text>

   <Button title="Tăng" onPress={() => setCount(count + 1)} />

   <Button title="Thay đổi khác" onPress={() => setOther(!other)} />  </View>

  );

}

Giải thích:

Nếu không có useMemo, phép tính tốn kém sẽ chạy lại mỗi khi bất kỳ state nào thay đổi.

useMemo giúp chỉ tính lại khi count thay đổi, tối ưu hiệu suất rất rõ rệt.

Trong các ứng dụng React Native, nơi hiệu suất và tốc độ phản hồi rất quan trọng, useMemo giúp bạn kiểm soát tài nguyên hiệu quả hơn.

4. useCallback – Tối ưu hóa callback function

useCallback ghi nhớ một hàm và chỉ tái tạo lại khi dependencies thay đổi. Điều này cực kỳ hữu ích khi bạn truyền callback xuống nhiều component con.

Cách sử dụng:

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

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

function Child({ onClick }) {

  return <Button title="Gọi hàm cha" onPress={onClick} />;

}

export default function Parent() {

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

  const handleClick = useCallback(() => {

    console.log('Đã click');

 }, []);

 return (

  <View>

    <Text>{count}</Text>

    <Button title="Tăng" onPress={() => setCount(count + 1)} /> <Child onClick={handleClick} />

  </View>

  );

}

Giải thích:

Không dùng useCallback, mỗi lần render, hàm handleClick sẽ được tạo lại, gây tốn tài nguyên và ảnh hưởng đến tối ưu hóa rendering.

Với useCallback, React biết rằng handleClick không thay đổi nếu dependencies không thay đổi.

Khi ứng dụng có nhiều component lồng nhau, useCallback giúp giảm rendering không cần thiết, cải thiện hiệu suất rõ rệt.

Kết luận

Hooks là nền tảng quan trọng trong việc phát triển ứng dụng React Native hiện đại. Chúng mang lại cú pháp gọn gàng, khả năng tái sử dụng logic cao hơn và tối ưu hóa hiệu suất vượt trội.

• useState: Quản lý trạng thái đơn giản.
• useEffect: Quản lý side effects chuyên nghiệp.
• useMemo: Giảm chi phí tính toán nặng.
• useCallback: Giảm tái tạo hàm không cần thiết.

Nắm vững cách dùng Hooks chính là bước đầu tiên để bạn tiến sâu hơn vào thế giới React Native chuyên nghiệp.

Nếu bạn đang tìm kiếm lộ trình bài bản, thực hành dự án thực tế, hãy cân nhắc tham gia các khoá học chuyên sâu về React Native. Việc học đúng cách ngay từ đầu sẽ giúp bạn tiết kiệm hàng trăm giờ tự mò mẫm và rút ngắn đáng kể thời gian trở thành lập trình viên mobile chuyên nghiệp.

Link đăng ký khóa học: https://laptrinh-online.vn/course/lap-trinh-react-native

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo/call)