# Sử dụng Hooks và tối ưu performance trong ReactJS ## 1. Giới thiệu `React Hooks` là một tính năng mới của React 16.8, sử dụng với `function component` giúp chúng ta sử dụng state và các tính năng của React mà không cần sử dụng class. `React Hooks` cho phép chúng ta móc các tính năng của React vào các component function. `React Hooks` giúp chúng ta tạo và truy cập state, lifecycle methods, context, refs, và các tính năng của React khác từ các component function. `React Hooks` giúp chúng ta có thể đăng ký các side effects từ các component function. `React Hooks` giúp chúng ta có tùy chỉnh DOM và các tính năng của React khác từ các component function. > React Hooks luôn luôn bắt đầu bằng từ `use` (ví dụ: useState, useEffect, useContext, useRef, useReducer, useCallback, useMemo, useImperativeHandle, useLayoutEffect, useDebugValue). > Ngoài ra, chúng ta cũng có thể tạo các custom hooks. ## 2. Các quy tắc khi sử dụng React Hooks 1. Chỉ sử dụng (khai báo) React Hooks ở đoạn code phía `trên cùng - top level` của component function (không sử dụng React Hooks trong các `vòng lặp, các điều kiện, hoặc các hooks lồng nhau` vì nó sẽ gây ra lỗi). 2. Không được đặt React Hooks sau các hàm `return` của component function (vì nó sẽ gây ra lỗi). Sau hàm `return` của component function chỉ được sử dụng `JSX`. 3. Điều cần thiết là `đảm bảo` rằng các React Hooks `luôn luôn được gọi ở cùng một thứ tự` ở mỗi lần render (điều này giúp chúng ta có thể dễ dàng theo dõi các side effects). 4. Chỉ sử dụng React Hooks ở trong các component function (Nhận biết bằng chữ cái được viết hoa ở đầu) hoặc custom hooks (Nhận biết bằng 1 hàm có từ `use` ở đầu). Không sử dụng React Hooks ở trong các `class component` hoặc function bình thường. 5. Khi khởi tạo 1 state, chúng ta cần phải khởi tạo giá trị mặc định cho state đó (ví dụ: useState(0), useState(''), useState([]), useState({}), useState(() => {})), nếu không chúng ta sẽ gặp lỗi. - Khi sử dụng 1 logic phức tạp để khởi tạo giá trị mặc định cho state, chúng ta cần phải sử dụng 1 callback để khởi tạo giá trị mặc định cho state (ví dụ: useState(() => {})), nếu không chúng ta sẽ gặp lỗi vì giá trị mặc định của state sẽ không được khởi tạo đúng cách. - VD: ```jsx const [state, setState] = useState(() => { const arr = JSON.parse(localStorage.getItem('watched'); return arr ) }); ``` 6. Khi gặp các sự kiện onClick, onChange, onSubmit, ... chúng ta cần phải sử dụng 1 callback để xử lý sự kiện nếu có 1 tham số cần truyền vào (ví dụ: `onClick={() => handleClick(id)}, onChange={(e) => handleChange(e)}`), nếu chỉ thực hiện hàm mà không có tham số thì có thể viết ngắn gọn hơn (ví dụ: `onClick={handleClick}, onChange={handleChange}`). Tuyệt đối chúng ta chỉ cần truyền hàm vào sự kiện, không cần gọi hàm trong sự kiện. - VD: ```jsx // không được gọi hàm handleClick() trong sự kiện onClick chỉ cần truyền hàm handleClick vào sự kiện onClick ``` ## 3. Các React Hooks cơ bản ### 3.1. useState từ thư viện `react` `useState` giúp chúng ta tạo và truy cập state từ component function. Chúng ta có thể sử dụng `useState` với các chức năng sau: - Tạo và truy cập state từ component function. + Cách đơn giản: `const [state, setState] = useState(initialState);` (khởi tạo giá trị mặc định cho state bằng 1 giá trị cố định). + Cách phức tạp: `const [state, setState] = useState(() => {});` (khởi tạo giá trị mặc định cho state bằng 1 callback khi giá trị khởi tạo là 1 logic phức tạp, hoặc bất đông bộ). - Cập nhật state: + Cách 1: `setState(newValue);` (cập nhật state bằng 1 giá trị cố định). + Cách 2: `setState((prevState) => {});` (cập nhật state bằng 1 callback khi giá trị cập nhật là 1 logic phức tạp, bất đồng bộ, hoặc phụ thuộc vào giá trị trước đó, `prevState` là giá trị trước đó). > Lưu ý: Khi cập nhật state với state là 1 object hoặc 1 array, chúng ta cần phải sử dụng 1 callback để cập nhật state (ví dụ: `setState((prevState) => { return {...prevState, key: value} })`). Tuyệt đối không được cập nhật state trực tiếp (ví dụ: `setState({...state, key: value}`) vì ban đầu nó được khởi tạo là 1 hằng số `const` và không thể thay đổi cấu trúc của nó, thay vào đó chúng ta cần phải tạo 1 bản sao của state và cập nhật bản sao đó. ### 3.2. useRef từ thư viện `react` `useRef` có thể được sử dụng để tham chiếu đến 1 DOM element hoặc 1 giá trị cố định và sẽ giữ nguyên giá trị của nó giữa các lần render. Hàm `useRef` trả về 1 object có 1 thuộc tính là `current`, giá trị của `current` sẽ thay đổi mỗi khi giá trị của ref thay đổi. `ref` sẽ giữ nguyên giá trị của nó giữa các lần render. `useRef` là một hàm `đồng bộ`, nghĩa là nó `không gây ra re-render` khi `giá trị` của nó `thay đổi`. Chúng ta có thể sử dụng `useRef` với các chức năng sau: - Tạo và truy cập ref từ component function. + Cách đơn giản: `const ref = useRef(initialValue);` (khởi tạo giá trị mặc định cho ref bằng 1 giá trị cố định). + Cách phức tạp: `const ref = useRef(() => {});` (khởi tạo giá trị mặc định cho ref bằng 1 callback khi giá trị khởi tạo là 1 logic phức tạp, hoặc bất đồng bộ). > `useRef` khác với `useState` ở chỗ là useRef không gây ra re-render khi giá trị của nó thay đổi, còn useState sẽ gây ra re-render khi giá trị của nó thay đổi. > Lưu ý: Khi sử dụng `ref` để tham chiếu đến 1 DOM element, chúng ta cần phải sử dụng `ref.current` để truy cập đến DOM element đó (ví dụ: `ref.current.focus()`). > VD1: ```jsx ... const inputRef = useRef(null); ... ; ... inputRef.current.focus(); ``` - `inputRef` sẽ được gán vào thuộc tính `ref` của DOM element, và `ref.current` sẽ trỏ đến DOM element đó. - `inputRef.current` sẽ là `` element. > VD2: ```jsx ... const countRef = useRef(0); ... useEffect(() => { countRef.current++; }, [count]); ``` - `countRef` sẽ tăng giá trị lên 1 mỗi khi giá trị của `count` thay đổi. - Không thể sử dụng `let` hoặc `const` để đếm số lần render vì giá trị của `let` và `const` sẽ bị reset về 0 mỗi khi component re-render. - Nếu sử dụng `useState` thì mỗi lần update sẽ gây ra re-render, còn `useRef` thì không gây ra re-render. ### 3.3. useEffect từ thư viện `react` `useEffect` giúp chúng ta thực hiện các side effect trong component function. `useEffect` tương tự như `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` trong class component. Trong `useEffect`, chúng ta có thể thực hiện các side effect như: gọi API, thay đổi DOM, thay đổi state, ... Nên tạo hàm bất đồng bộ trong `useEffect`, để tránh block main thread vì các hàm set state update là bất đồng bộ. `useEffect` sẽ được gọi sau mỗi lần render của component, nó sẽ render ra trước rồi mới gọi `useEffect` vì `useEffect` là một side effect, không đồng bộ. `useEffect` nhận vào 2 tham số: 1 là hàm callback, 2 là mảng dependency. - `Hàm callback` sẽ được gọi sau mỗi lần render. - `Mảng dependency` sẽ quyết định xem hàm callback có được gọi hay không, nếu một trong các phần tử trong mảng dependency thay đổi thì hàm callback sẽ được gọi. - Nếu mảng dependency rỗng, hàm callback sẽ được gọi sau mỗi lần render. VD `useEffect(() => {console.log('Hello'), [])` - Nếu mảng dependency không rỗng, hàm callback sẽ chỉ được gọi khi giá trị của các phần tử trong mảng dependency thay đổi (phần tử trong mảng có thể là state, props,...). VD `useEffect(() => {console.log('Hello'), [count, title])` - chỉ gọi khi count hoặc title thay đổi. - Nếu không có mảng dependency, hàm callback sẽ được gọi vô tận sau khi render. VD `useEffect(() => {console.log('Hello')})` `useEffect` có thể trả về một hàm `cleanup`, hàm này sẽ dọn dẹp các side effect khi component bị unmount hoặc khi mảng dependency thay đổi (Giống như `componentWillUnmount` trong class component). Hàm `cleanup` được thể hiện là 1 hàm trả về ở cuối hàm callback của `useEffect`. `return () => {}`. - Ví dụ khi gọi API, chúng ta cần hủy bỏ các request khi component bị unmount. - Ví dụ khi thay đổi state, chúng ta cần hủy bỏ các side effect cũ. - Ví dụ khi nhấn vào 1 thông tin, làm thay đổi title của trang, chúng ta cần reset lại title khi component bị unmount (tránh trường hợp title bị thay đổi khi chuyển qua trang khác). > VD: ```jsx useEffect(() => { console.log('Hello'); return () => console.log('Goodbye') }, []) ``` => Sẽ log ra "Hello" sau mỗi lần render và log ra "Goodbye" khi component bị unmount hoặc khi mảng dependency thay đổi, hàm `return () => console.log('Goodbye')` chính là hàm cleanup. #### 3.3.1. Các quy tắc liên quan đến mảng phụ thuộc (dependencies array) Khi sử dụng `useEffect`, chúng ta cần tuân thủ các quy tắc sau: - Mọi **state** và **props** được sử dụng trong **useEffect** phải được khai báo trong **dependencies array**. - Mọi **function** hay **values** sử dụng tham chiếu đến bất kỳ 1 **state** hay **props** được sử dụng trong **useEffect** nào cũng phải được khai báo trong **dependencies array**. ```jsx const [number, setNumber] = useState(5) const [duration, setDuration] = useState(0) const min = Math.floor(duration) const sec = (duration-min) * 60 const formatDur = () => { return `${min}:${sec}` } useEffect(() => { document.title = `You have been on this page is ${number} for ${formatDur()}` }, [number, formatDur]) // number và formatDur tham chiếu đến các giá trị phản ứng (state, props) nên phải được khai báo trong dependencies array ``` - Không nên truyền vào **dependencies array** một **object**, **array**, **function** vì nó sẽ tạo ra một **object**, **array**, **function** mới mặc dù nó có giá trị giống với giá trị cũ nhưng nó là kiểu tham chiếu, sẽ không tham chiếu đến cùng 1 ô nhớ, nên component con sẽ bị render lại. Để giải quyết vấn đề này, bạn có thể sử dụng **useMemo** hoặc **useCallback**. - Chúng ta cũng không nên sử dụng useEffect trong các trường hợp sau: - **useEffect** không nên sử dụng để thực hiện bắt lỗi (error handling) vì nó sẽ gây ra vấn đề về performance. - **useEffect** không nên sử dụng quá nhiều để fetch data từ server, vì nó sẽ gây ra vấn đề về performance. - **useEffect** không nên sử dụng quá nhiều để đồng bộ hóa sự thay đổi giữa các state, props, context, vì nó sẽ gây ra vấn đề về performance. #### 3.3.2 Giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array) ##### 3.3.2.1. Function Để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array), đối với function, giúp cải thiện performance, chúng ta có thể thực hiện các cách sau: - Di chuyển function vào trong **useEffect** để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array) (ví dụ: `useEffect(() => { function handleClick() {} })`). - Sử dụng **useCallback** để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array). (ví dụ: `const handleClick = useCallback(() => {}, [])`). Và `useCallback` sẽ trả về 1 hàm callback mới chỉ khi dependencies thay đổi. - Nếu trong function không tham chiếu hay sử dụng **state** hay **props**, không cần phải khai báo trong **dependencies array**. ##### 3.3.2.2. Object, Array Để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array), đối với object, array, giúp cải thiện performance, chúng ta có thể thực hiện các cách sau: - Thay vì việc truyền cả **object**, **array** vào **dependencies array**, bạn có thể truyền từng phần tử, thuộc tính của **object**, **array** đó vào **dependencies array**. VD `useEffect(() => { console.log('Hello'), [arr[0], arr[1]])` - Sử dụng **useMemo** để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array). VD `const arr = useMemo(() => {}, [arr[0], arr[1]])` - chỉ gọi lại khi arr[0] hoặc arr[1] thay đổi. ##### 3.3.2.3. Những trường hợp còn lại Ngoài ra, chúng ta còn có thể giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array) bằng cách: - Nếu có quá nhiều state, props (reactive values), thì nên sử dụng useReducer để giảm thiểu truyền tham số vào mảng phụ thuộc (dependencies array). - Không cần truyền các hàm `setState`, `dispatch` vào **dependencies array** vì nó không bị render lại khi dependencies thay đổi, vì nó đã được React tối ưu sẵn rồi. ### 3.4. useMemo và useCallback từ thư viện `react`, tối ưu performance #### 3.4.1. Giới thiệu về việc tối ưu performance Chúng ta có các công cụ để cải thiện hiệu suất: - Ngăn chặn việc render lại không cần thiết, kiểu như render lại xong trong DOM không có gì thay đổi (memo, useMemo, useCallback, truyền các phần tử như là các children hoặc props bình thường) - Cải thiện tốc độ app, phản hồi và thời gian tải (useMemo, useCallback, useTransition) - Giảm dung lượng các bundle và tài nguyên (sử dụng gói bên thứ 3, chia nhỏ các bundle, sử dụng code splitting, sử dụng lazy loading) Một component instance sẽ được render lại khi: - Props thay đổi - State thay đổi - Context thay đổi - Hook thay đổi - Các component cha render lại - Force render #### 3.4.2. Các cách cải thiện hiệu suất ##### 3.4.2.1. Sử dụng trick truyền vào props như là children Khi truyền vào props như là children, nó sẽ không bị render lại khi các props thay đổi, bởi vì: - Nguyên nhân là do React không kiểm tra sự thay đổi của props children, nó chỉ kiểm tra sự thay đổi của props thông thường. Khi component cha render lại, bản chất của props children đã có sẵn trong component con, nên nó không cần render lại. > Vì vậy, nếu bạn không muốn component render lại khi props thay đổi, hãy truyền vào props như là children. ```jsx // Không làm component Child bị render lại khi button được click const Parent = ({ children }) => { return (

{children}

) } const Child = () => { return (

Hello

) } // Khi button được click, component Parent sẽ render lại, nhưng component Child không bị render lại vì bản chất props children nó đã có sẵn được render trước đó rồi mới truyền vào Parent ``` > Tuy nhiên, nếu sử dụng như sau, component Child sẽ bị render lại khi button được click. ```jsx // Như này sẽ làm component Child bị render lại khi button được click const Parent = () => { return (

) } const Child = () => { return (

Hello

) } ``` ##### 3.4.2.2. Sử dụng `memo` `useMemo` và `useCallback` `memo` giúp component không bị render lại khi props không thay đổi, fix được vấn đề khi truyền vào props như là children ở phần trên. `useMemo` và `useCallback` giúp chúng ta giảm thiểu việc render lại của component function. `useMemo` giúp chúng ta lưu lại kết quả của 1 function, 1 giá trị, 1 object, 1 array, ... sau lần render đầu tiên, nếu dependencies không thay đổi, nó sẽ trả về kết quả đã lưu, không cần render lại. `useCallback` giúp chúng ta lưu lại 1 function sau lần render đầu tiên, nếu dependencies không thay đổi, nó sẽ trả về function đã lưu, không cần render lại. `useMemo` và `useCallback` có 1 mảng dependencies (giống như `useEffect`), nếu dependencies thay đổi, nó sẽ render lại. Chỉ sử dụng `useMemo` và `useCallback` trong trường hợp: - Lưu lại props để tránh render lại (kết hợp với `memo`). - Lưu lại kết quả của 1 function, 1 giá trị, 1 object, 1 array, ... để tránh render lại. - Lưu lại các giá trị được sử dụng trong các dependencies array của các hooks khác. > VD sử dụng `memo`: ```jsx import { memo } from 'react' const Parent = () => { return (

{/* Truyền vào props show vào component Child */}

) } const Child = memo(({ show }) => { // Sử dụng memo để component Child không bị render lại khi props show không thay đổi const [showModal, setShowModal] = useState(show) return ( {showModal &&

Modal

} ) }) ``` > VD sử dụng `useMemo`: ```jsx import { useMemo, memo } from 'react' const Parent = () => { const [number, setNumber] = useState(0) const formatNumber = useMemo(() => { return number + 1 }, [number]) return (

) } const Child = memo(({ formatNumber }) => { return (

{formatNumber}

) }) ``` - `formatNumber` sẽ lưu lại kết quả của `number + 1` sau lần render đầu tiên, nếu `number` không thay đổi, nó sẽ trả về kết quả đã lưu, không cần render lại. > VD sử dụng `useCallback`: ```jsx import { useCallback, memo } from 'react' const Parent = () => { const [post, setPost] = useState(0) const handlePost = useCallback((post) => { setPost(posts => [...posts, post]) }, []) // truyền vào 1 mảng rỗng để handlePost không bị render lại khi component Parent render lại return (

) } const Child = memo(({ handlePost }) => { return ( ) }) ``` - `handlePost` sẽ lưu lại 1 function sau lần render đầu tiên, nếu dependencies không thay đổi, nó sẽ trả về function đã lưu, không cần render lại. ##### 3.4.3.3. Tối ưu hóa Bundle Size và chia nhỏ Bundle **Bundle** là một tập hợp các file Javascript, CSS, HTML, image,... được tạo ra từ quá trình build của ứng dụng. Khi người dùng truy cập vào ứng dụng, nó sẽ tải về các bundle này để chạy ứng dụng trong lần truy cập đầu tiên ở phía client. **Bundle Size** là dung lượng của các bundle, nó ảnh hưởng đến tốc độ tải trang, tốc độ chạy ứng dụng, tốc độ phản hồi của ứng dụng khi người dùng truy cập. **Code Splitting** là một kỹ thuật chia nhỏ các bundle thành các bundle nhỏ hơn, nó giúp giảm dung lượng các bundle. Người dùng chỉ tải về các bundle cần thiết, không tải về toàn bộ các bundle. Lazy Loading là một kỹ thuật code splitting, nó giúp tải về các bundle khi người dùng cần thiết. > Ví dụ với React, bạn có thể sử dụng **React.lazy** và **Suspense** để chia nhỏ các bundle và lazy loading. ```jsx import { lazy, Suspense } from 'react' const OtherComponent = lazy(() => import('./OtherComponent')) // Chia nhỏ bundle và lazy loading const MyComponent = () => { return ( Loading...}> {/* Hiển thị một component loading khi đang tải */} {/* Khi OtherComponent được render, nó sẽ tải về bundle của OtherComponent */} ) } ``` ### 3.5. useContext từ thư viện `react` để sử dụng `API Context` quản lý `State` nâng cao. #### 3.5.1. Quản lý State nâng cao trong React ##### 3.5.1.1. Giới thiệu **Quản lý state** là một trong những vấn đề quan trọng nhất khi phát triển ứng dụng React. - **State** là dữ liệu mà React sử dụng để render giao diện và cập nhật giao diện khi dữ liệu thay đổi. - **State** có thể là một giá trị, một object, một array, ... - **State** có thể được quản lý tại component cha và truyền xuống các component con thông qua props. - **State** cũng có thể được quản lý tại component con thông qua `useState` hoặc `useReducer`. - **State** cũng có thể được quản lý tại component con thông qua **Context API** hoặc **Redux**. ##### 3.5.1.2. Các loại state **1. Local state** - **Local state** là state được quản lý tại component con thông qua `useState` hoặc `useReducer`. - **Local state** chỉ được sử dụng trong component và các component con của nó truyền xuống thông qua props. **2. Global state** - **Global state** là state được quản lý tại component cha và truyền xuống các component con thông qua **Context API** hoặc **Redux**. - **Global state** có thể được sử dụng ở bất kỳ component nào trong ứng dụng. > Nếu 1 component được re-render 2 lần khi state thay đổi, **Global state** sẽ được re-render 2 lần vì nó được sử dụng ở nhiều component. Còn **Local state** chỉ được re-render 1 lần. **3. Remote state** - **Remote state** là state được lưu trữ ở server và được truy cập thông qua API, được xử lý bằng các hàm bất đồng bộ như `fetch`, `axios`, `ajax`, ... thông qua `useEffect` hoặc các `lifecycle method`. - **Remote state** có thể được lưu trữ ở database, file, cache, .. - **Remote state** cần được re-fetch và cập nhật khi dữ liệu thay đổi. **4. UI state** - **UI state** là state được sử dụng để quản lý giao diện của ứng dụng. - **UI state** có thể là state để quản lý form, modal, tab, ... - **UI state** thường được xử lý đồng bộ và không cần phải lưu trữ ở server, mà chỉ cần lưu trữ ở client. Thường sử dụng `Context API` hoặc `useState` để quản lý. #### 3.5.2. Giới thiệu về Context API ##### 3.5.2.1. Giới thiệu **Context API** là một cách để truyền dữ liệu từ component cha đến các component con mà không cần phải truyền qua các props. (Truyền dữ liệu qua props từ component cha đến component con có thể gây ra hiện tượng **prop drilling**). Nó cho phép chúng ta truyền các global state cho toàn bộ ứng dụng mà không cần phải truyền qua props từ component cha đến component con. **Context API** bao gồm 3 phần chính: - **Provider**: Là nơi chứa dữ liệu và cung cấp dữ liệu cho các component con. (thường được đặt ở component cha của ứng dụng) - **Context**: Là nơi chứa dữ liệu mà chúng ta muốn chia sẻ (có thể là state, function, object, array, ...) - **Consumer**: Là nơi sử dụng dữ liệu từ **Provider**. ##### 3.5.2.2. Sử dụng Context API **1. Tạo Context** - Để tạo **Context**, ta sử dụng hàm `createContext` từ thư viện `react`. - VD: Tạo **Context** để chứa thông tin về ngôn ngữ của ứng dụng. ```jsx import { createContext } from 'react'; export const LanguageContext = createContext(); // Tạo Context ``` **2. Tạo Provider** - Để tạo **Provider**, ta sử dụng **Context** đã tạo ở trên như là 1 component và thêm vào sau là `.Provider`. Sau đó truyền dữ liệu vào **Provider** thông qua thuộc tính `value`. - VD: Tạo **Provider** để cung cấp thông tin về ngôn ngữ cho toàn bộ ứng dụng. ```jsx const Provider = ({ children }) => { const [language, setLanguage] = useState('en'); return ( {/* Provider */} {children} ); }; export default Provider; ``` **3. Sử dụng Consumer** - Để sử dụng dữ liệu từ **Provider**, ta sử dụng **useContext** từ thư viện `react` và truyền vào **Context** đã tạo ở buớc đầu tiên. - VD: Sử dụng dữ liệu từ **Provider** để hiển thị thông tin về ngôn ngữ. ```jsx import { useContext } from 'react'; import { LanguageContext } from './Provider'; // Import Context đã tạo ở trên để sử dụng const Language = () => { const { language, setLanguage } = useContext(LanguageContext); // Sử dụng dữ liệu từ Provider bằng useContext return (

Language: {language}

); }; export default Language; ``` > Cuối cùng ta có mô hình như sau: ```jsx // App.jsx import Language from './Language'; import Provider from './Provider'; const App = () => { return ( ); }; export default App; ``` ##### 3.5.2.3. Nâng cao về Context API Chúng ta có thể tự tạo 1 custom hook để sử dụng **Context** một cách dễ dàng hơn. Tránh việc sử dụng useContext xong điền các biến context vào từng component. > Tạo custom hook để sử dụng **Context**. ```jsx import { createContext } from 'react'; const LanguageContext = createContext(); // Tạo Context const Provider = ({ children }) => { const [language, setLanguage] = useState('en'); return ( {/* Provider */} {children} ); }; const useLanguage = () => { const context = useContext(LanguageContext); if (!context) { throw new Error('useLanguage must be used within a LanguageProvider'); } return context; }; export { Provider, useLanguage }; // Export Provider và custom hook ``` Sau đó, Sử dụng custom hook để sử dụng **Context**. ```jsx import { useLanguage } from './Provider'; // Import custom hook đã tạo ở trên để sử dụng const Language = () => { const { language, setLanguage } = useLanguage(); // Sử dụng custom hook để sử dụng dữ liệu từ Provider return (

Language: {language}

); }; export default Language; ``` Cuối cùng ta có mô hình như sau: ```jsx // App.jsx import Language from './Language'; import { Provider } from './Provider'; const App = () => { return ( ); }; export default App; ``` ### 3.6. useReducer từ thư viện `react` `useReducer` là một hook giúp chúng ta quản lý state của một component dựa trên các action. `useReducer` giúp chúng ta quản lý state của một component một cách dễ dàng hơn, đặc biệt là khi chúng ta cần phải quản lý state của một component có nhiều hơn 1 key. #### 3.6.1. So sánh useReducer vs useState `useState` và `useReducer` đều giúp chúng ta quản lý state của một component. `useState` thường được sử dụng khi chúng ta cần quản lý state của một component có 1 key. `useReducer` thường được sử dụng khi chúng ta cần quản lý state của một component có nhiều hơn 1 key. #### 3.6.2. Cách sử dụng useReducer Để sử dụng `useReducer`, chúng ta cần phải import `useReducer` từ `react`. `useReducer` nhận vào 2 tham số: - Tham số thứ nhất là một hàm reducer. - Hàm `reducer` nhận vào 2 tham số (state hiện tại, action) và trả về state mới phải bao gồm tất cả các key của state cũ. - Tham số thứ hai là giá trị khởi tạo (`initial`) của state. `useReducer` trả về một array gồm 2 phần tử: - Phần tử đầu tiên là `state` hiện tại. - Phần tử thứ hai là `dispatch` function để gọi các action. Mô hình của `useReducer`: - `dispatch` sẽ là thực thể yêu cầu `reducer` thực hiện một hành động nào đó. - `reducer` sẽ nhận yêu cầu từ `dispatch` và trả về state mới dựa trên action mà `dispatch` gửi đến. - `state` sẽ được cập nhật dựa trên state mới mà `reducer` trả về. >VD: ```jsx import React, { useReducer } from 'react'; const initialState = { count: 0 }; const reducer = (state, action) => { switch (action.type) { case 'increment': return { ...state, count: state.count + 1 }; case 'decrement': return { ...state, count: state.count - 1 }; default: throw new Error(); } }; function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (

Count: {state.count}

); } ``` > Lưu ý: Do ban đầu khởi tạo, ta sử dụng `const` nên không thể thay đổi giá trị của `state` trực tiếp, mà phải tạo ra 1 state mới từ state cũ. Vì vậy, ta sử dụng `{ ...state, count: state.count + 1 }` thay vì `state.count += 1`. ### 3.7. useTransition từ thư viện `react` #### 3.7.1. Giới thiệu `useTransition` là 1 `hook` giúp chúng ta tạo ra `transition` cho các `element` trong `UI`. `useTransition` giúp chúng ta tạo ra hiệu ứng `transition` mượt mà, không bị giật lag. `useTransition` có 2 tham số: - `isPending`: `boolean` - `state` xác định xem có đang thực hiện `transition` hay không. - `startTransition`: `function` - `function` bắt đầu thực hiện `transition`. > Chúng ta sử dụng `useTransition` với mục đích hiển thị `loading` khi đang thực hiện 1 `request` lên server, hoặc khi đang thực hiện 1 `action` bất đồng bộ mà không dùng `form`, thay vào đó là `Event handler`,.. #### 3.7.2. Sử dụng với useTransition `useTransition` có thể sử dụng để thực hiện các thao tác `create`, `update`, `delete` dữ liệu. > File `client-component.js` ```js import { useTransition } from "react"; import { upateProfile } from "./server-action"; export default function PostForm() { const [isPending, startTransition] = useTransition(); function handleSubmit() { startTransition(() => { upateProfile(); }); // bắt đầu thực hiện transition khi click vào button Submit } return ( ); } ``` ### 3.8. useOptimistic từ thư viện `react` #### 3.8.1. Giới thiệu `useOptimistic` là 1 `hook` giúp chúng ta tạo ra `optimistic UI` cho các `element` trong `UI`. Sử dụng `useOptimistic` với các hành động bất đồng bộ, thay vì việc chờ đợi kết quả từ `Server`, chúng ta sẽ hiển thị kết quả ngay lập tức, trong khi đó `Server` đang xử lý dữ liệu sẽ chạy ở `nền`. Nếu xử lý lỗi thì `useOptimistic` sẽ `rollback` lại `UI` về trạng thái ban đầu. `useOptimistic` nhận vào 2 tham số: - `biến, giá trị, state` cần thực hiện `optimistic UI` mà không cần chờ đợi kết quả từ `Server`. Đây là các `biến` ban đầu khi chưa có thực hiện `optimistic UI`. - `function` thể hiện trạng thái kế tiếp, (update UI) của `state` sau khi thực hiện hàm `setOptimistic`. Function này có 2 tham số: - `currentState`: `state` hiện tại, ban đầu khi chưa thực hiện `optimistic UI`. Sau khi thực hiện `optimistic UI`, `currentState` sẽ thay đổi. - `optimisticValue`: giá trị dùng để đưa vào hàm `setOptimistic` để thực hiện `optimistic UI`. > Kết quả trả về của `function` này sẽ là `state` mới sau khi xử lý logic giữa `currentState` và `optimisticValue` `useOptimistic` trả về 1 `array` gồm 2 phần tử: - `state`: ban đầu giá trị bằng với `state` tham số đầu tiên của `useOptimistic`, sau khi thực hiện `setOptimistic` giá trị bằng với `currentState` của tham số thứ 2 của `function` truyền vào `useOptimistic`. - `function` thực hiện `optimistic UI`, nhận vào 1 tham số chính là bằng với `optimisticValue` của tham số thứ 2 của `function` truyền vào `useOptimistic`. Khi gọi hàm này, sẽ kích hoạt `optimistic UI` và `state` sẽ thay đổi ngay lập tức. #### 3.8.2. Sử dụng với Server Action, API > File `client-component.js` ```js import { useOptimistic } from "react"; import { upateProfile } from "./server-action"; export default function PostForm({ user }) { const [optimisticState, setOptimistic] = useOptimistic(user, (currentState, optimisticValue) => { return { ...currentState, ...optimisticValue }; }); async function handleSubmit() { setOptimistic({ name: "John Doe", age: 31 }); // thực hiện optimistic UI, lúc này UI sẽ hiển thị ngay lập tức giá trị mới, không cần chờ đợi kết quả từ Server await upateProfile({ name: "John Doe", age: 31 }); // gửi dữ liệu lên Server để xử lý } return (

Name: {optimisticState.name}

// Sử dụng optimisticState thay cho user, vì optimisticState sẽ thay đổi ngay lập tức khi thực hiện setOptimistic, còn user chỉ thay đổi khi có kết quả từ Server trả về. Muốn hiển thị ra UI ngay lập tức giá trị mới thì sử dụng optimisticState thay cho user.

Age: {optimisticState.age}

); } ``` ### 3.9. useFormStatus từ thư viện `react-dom` #### 3.9.1. Giới thiệu `useFormStatus` là 1 `hook` giúp chúng ta quản lý `state` của biểu mẫu `

` một cách dễ dàng. Quy tắc sử dụng `useFormStatus`: - `useFormStatus` phải thuộc về 1 `Client Component` (không thể sử dụng trong `Server Component`). - Muốn sử dụng `useFormStatus` thì phải đặt `Component` chứa nó vào trong thẻ ``. Không thể sử dụng `useFormStatus` nếu khai báo hoặc sử dụng ngoài thẻ ``. #### 3.9.2. Sử dụng useFormStatus `useFormStatus` có thể sử dụng cùng với `Server Action` để thực hiện các thao tác `create`, `update`, `delete` dữ liệu. > File `client-component.js` ```js import { useFormStatus } from "react-dom"; import { upateProfile } from "./server-action"; // tạo Button chứa useFormStatus để đưa vào form function Button() { const { pending } = useFormStatus(); return ( ); } export default function PostForm() { return (

<Button /> {/* Button chứa useFormStatus đặt trong form */} 
    </form>
  );
}

```

### 3.10. useForm từ thư viện `react-hook-form`
`React Hook Form` là một thư viện giúp quản lý form một cách dễ dàng và hiệu quả trong React.

`React Hook Form` giúp giảm thiểu việc render lại component khi người dùng nhập liệu vào form.

`React Hook Form` hỗ trợ validation, submit form, hiển thị lỗi và nhiều tính năng khác.

#### 3.10.1. Cài đặt
Để cài đặt React Hook Form, chúng ta cần chạy lệnh sau:
```bash
npm install react-hook-form
```

#### 3.10.2. Sử dụng
Để sử dụng React Hook Form, chúng ta cần import `useForm` từ thư viện và sử dụng như sau:
```javascript
import { useForm } from 'react-hook-form'; // Import thư viện

const App = () => {
  const { register, handleSubmit, formState: { errors }, reset, getValues } = useForm(); // Sử dụng hook
  // register: Đăng ký input name cho body
  // handleSubmit(success, fail): Xử lý submit form, nếu form hợp lệ thì chạy success, ngược lại chạy fail
  // formState: Lưu trạng thái của form, ở đây là errors
  // reset: Reset form về trạng thái ban đầu 
  // getValues: Lấy giá trị trường body của form

const onSubmit = (data) => {
    console.log(data); // Log dữ liệu khi submit form
    reset(); // Reset form sau khi submit
  }

return (
    <form onSubmit={handleSubmit(onSubmit)}> {/* Gọi đến hàm handleSubmit của hook */}
      <input id="name" {...register('name', { required: true,
        maxLength: 20, // Độ dài tối đa của input
        min: {
          value: 18, // Giá trị tối thiểu của input
          message: "You must be 18 years old" // Hiển thị thông báo khi input không hợp lệ
        }
        validate: value => value <= getValues('age') || "You can't enter a value greater than age" // Kiểm tra giá trị của input so với giá trị của trường age, nếu không hợp lệ thì hiển thị thông báo
      })} /> 
      {/* Sử dụng hàm register để đăng ký input, body lúc này là "name", register đã bao gồm tất cả các hàm xử lý, onChange,... của <form/> và validation, ở đây là required */}
      {errors.name && <p>This field is required</p>} {/* Hiển thị lỗi khi input không hợp lệ */}
      <button type="submit">Submit</button>
    </form>
  );
}
```

## 4. Tự tạo Custom hooks
`Custom hooks` là 1 hàm JavaScript bắt đầu bằng từ `use` và có thể gọi các React Hooks khác.

`Custom hooks` giúp chúng ta tái sử dụng logic giữa các component function.

`Custom hooks` giống như 1 component function, nhưng nó không trả về JSX, mà trả về các giá trị, các hàm, hoặc các React Hooks khác.

`Custom hooks` giống như 1 hàm JavaScript bình thường, nhưng nó có thể gọi các React Hooks khác vì bình thường trong hàm JavaScript không thể gọi các React Hooks.
> VD `useCustomHook.js`:
```js
function useCustomHook() { 
    const [state, setState] = useState(0); 
    return [state, setState];
}
```
- `useCustomHook` là 1 custom hook.
- `useCustomHook` trả về 1 state và 1 hàm để cập nhật state.
- `useCustomHook` có thể gọi các React Hooks khác như `useState`, `useEffect`, `useRef`, ... bên trong nó.</article></body></html>

ReactJS: Hướng dẫn sử dụng các Hooks và tối ưu hiệu suất trong ReactJS