Advanced React Hooks Deep Dive: Build a Scalable React Application

React Hooks đã thay đổi hoàn toàn cách chúng ta viết React application. Trước đây React sử dụng Class Components, nhưng từ React 16.8 trở đi, Hooks trở thành chuẩn phát triển React hiện đại.

Trong bài viết nâng cao này chúng ta sẽ:

• Hiểu sâu về React Hooks
• Xây dựng một mini project React
• Viết Custom Hooks
• Quản lý Global State
• Fetch API và tối ưu code

Video tham khảo (≈50 phút)

https://www.youtube.com/watch?v=O6P86uwfdR0

Video này hướng dẫn chi tiết về cách sử dụng React Hooks để xây dựng ứng dụng hoàn chỉnh.

1. Khởi tạo React Project

npx create-react-app advanced-react-hooks
cd advanced-react-hooks
npm start

Sau khi chạy, project React sẽ chạy tại:

http://localhost:3000

2. useState -- Quản lý State

Hook useState giúp quản lý state trong functional component.

import { useState } from "react";

export default function Counter(){

  const [count,setCount] = useState(0)

  return (

    <div>

      <h1>{count}</h1>

      <button onClick={()=>setCount(count+1)}>
        Increase
      </button>

      <button onClick={()=>setCount(count-1)}>
        Decrease
      </button>

    </div>

  )

}

3. useEffect -- Lifecycle trong React

Hook useEffect dùng để xử lý:

• gọi API
• subscriptions
• side effects

import { useEffect,useState } from "react"

function Users(){

 const [users,setUsers] = useState([])

 useEffect(()=>{

  fetch("https://jsonplaceholder.typicode.com/users")
  .then(res=>res.json())
  .then(data=>setUsers(data))

 },[])

 return(

  <div>

   {users.map(user=>(
    <p key={user.id}>{user.name}</p>
   ))}

  </div>

 )

}

4. useContext -- Global State

React Context giúp chia sẻ state giữa nhiều component.

import { createContext,useContext } from "react"

const ThemeContext = createContext()

function App(){

 return(
  <ThemeContext.Provider value="dark">
    <Navbar/>
  </ThemeContext.Provider>
 )

}

function Navbar(){

 const theme = useContext(ThemeContext)

 return <h1>Theme: {theme}</h1>

}

5. Custom Hook

Custom Hook giúp tái sử dụng logic.

import { useState,useEffect } from "react"

export function useFetch(url){

 const [data,setData] = useState([])

 useEffect(()=>{

  fetch(url)
  .then(res=>res.json())
  .then(data=>setData(data))

 },[url])

 return data

}

6. Sử dụng Custom Hook

import { useFetch } from "./hooks/useFetch"

function Users(){

 const users = useFetch(
  "https://jsonplaceholder.typicode.com/users"
 )

 return(

  <div>

   {users.map(user=>(
    <p key={user.id}>{user.name}</p>
   ))}

  </div>

 )

}

7. Project Structure

src
 ├ components
 ├ hooks
 ├ pages
 ├ context
 └ App.js

Kiến trúc này giúp project:

• dễ maintain
• dễ scale
• dễ đọc code

8. Performance Optimization

Một số kỹ thuật tối ưu React:

• React.memo
• useMemo
• useCallback
• Lazy Loading

Ví dụ:

import React from "react"

const UserCard = React.memo(function UserCard({name}){

 console.log("render")

 return <div>{name}</div>

})

export default UserCard

9. Kết luận

React Hooks giúp:

• code clean hơn
• logic dễ tái sử dụng
• dễ mở rộng project

Ngày nay hầu hết React application đều sử dụng Hooks thay vì Class Components.

Nếu bạn muốn trở thành Frontend Developer chuyên nghiệp, việc hiểu sâu React Hooks là điều bắt buộc.