- Closure: is a func can remember where it was born and can access variables its outside - Closure: is a inner func can access/modify variables of outer func that contain it. - Closure: is a inner func can access/modify variables of outer func that contain it.

AJAX is e method which comunicate with server without reload page!

- Dưới thẻ input trong <form> nên có 1 thẻ div chứa error - The user authentication process: + Wrap/ protect routes (checking if user isAuthenticated?) (P1) + Manage authentication by ContextApi (createContext() in parentComponent and useContext() in childComponent to get value from parent) (P2) + Config accessToken with axios - through Interceptors (P3). + Handle / setIsAuthenticated in Login component ) (P4) - ProtectRoute and RejectedRoute (S.170) (P1)    - (P2)  - Authenticate (trick to increase memory access speed) (S.171) (P3)  => this.accessToken was saved on ram (by Class Http). If you just call getAccessTokenFromLS() -> it was saved on hard disk (read data from RAM is faster than read data from hard disk)  - (P4) 

- HeroIcons - Floating UI: Use case: Popover + useHover + FloatingPortal + Arrow   - Framer emotion 

 #right const ExampleComponent1 = ({ children }: {children: React.ReactNode}) => { return <div>{children}</div>; }; #error const ExampleComponent2 = ({ children }: React.ReactNode) => { return <div>{children}</div>; }; => It is trying to type the destructured props object as a ReactNode, which props is obviously not. 

# Một số khái niệm quan trọng - `staleTime` (default `0` ms): Thời gian data được cho là đã cũ. Khi get data xong thì sau một thời gian bạn quy định thì data nó sẽ tự cũ - `cacheTime` (default `5*60*1000` ms tức 5 phút): Thời gian data sẽ bị xóa ra khỏi bộ nhớ đệm. Có thể data đã "cũ" nhưng nó chưa bị xóa ra khỏi bộ nhớ đệm vì bạn set `stateTime < cacheTime`. Thường thì người ta sẽ set `stateTime < cacheTime` - `inactive`: là khi data đó không còn component nào subcribe cả ```tsx const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList }) `result` là một object chứa một vài state rất quan trọng: `status`, `fetchStatus`,... Những state về các khoảnh khắc của data - `isLoading` or `status === 'loading'` - Query chưa có data - `isError` or `status === 'error'` - Query xảy ra lỗi - `isSuccess` or `status === 'success'` - Query thành công và data đã có sẵn Những state về data - `error` - Nếu `isError === true` thì `error` sẽ xuất hiện ở đây - `data` - Nếu `isSuccess === true` thì `data` sẽ xuất hiện ở đây Đặc biệt là `fetchStatus` - `isFetching` or `fetchStatus === 'fetching'` - Đang fetching API. - `isPaused` or `fetchStatus === 'paused'` - Query muốn fetch API nhưng bị tạm dừng vì một lý do nào đó. - `fetchStatus === 'idle'` - Query không làm gì cả Chỉ cần nhớ - `status` cho thông tin `data` có hay không - `fetchStatus` cho thông tin về `queryFn` có đang chạy hay không

## Cơ chế caching Một data mà đã `stale` (old) thì khi gọi lại query của data đó, nó sẽ fetch lại api. Nếu không `stale` thì không fetch lại api. Một data mà bị xóa khỏi bộ nhớ (tức là quá thời gian `cacheTime`) thì khi gọi lại query của data đó, nó sẽ fetch lại api. Nếu còn chưa bị xóa khỏi bộ nhớ nhưng đã `stale` thì nó sẽ trả về data cached và fetch api ngầm, sau khi fetch xong nó sẽ update lại data cached và trả về data mới cho bạn. Caching là một vòng đời của: - Query Instance có hoặc không cache data - Fetch ngầm (background fetching) - Các inactive query - Xóa cache khỏi bộ nhớ (Garbage Collection) Một ví dụ như thế này cho anh em dễ hiều: Giả sử chúng ta dùng `cacheTime` mặc định là **5 phút** và `staleTime` là `0`. ```jsx function A() { const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) } function B() { const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) } function C() { const result = useQuery({ queryKey: ['todos'], queryFn: fetchTodos }) } ``` - `A` component được mount - Vì không có query nào với `['todos']` trước đó, nó sẽ fetch data - Khi fetch xong, data sẽ được cache dưới key là `['todos']` - hook đánh dấu data là `stale` (cũ) vì sau `0`s - Bây giờ thì `B` component được mount ở một nơi nào đó - Vì cache data `['todos']` đã có trước đó, data từ cache sẽ trả về ngay lập tức cho component `B` - Vì cache data `['todos']` được cho là đã `stale` nên nó sẽ fetch api tại component `B` - Không quan trọng function `fetchTodos` ở `A` và `B` có giống nhau hay không, việc fetch api tại `B` sẽ cập nhật tất cả các state query liên quan của `B` và `A` vì 2 component cùng key => cùng subcribe đến một data - Khi fetch thành công, cache data `['todos']` sẽ được cập nhật, cả 2 comonent `A` và `B` cũng được cập nhật data mới - Bây giờ thì `A` và `B` unmount, không còn sử dụng nữa, không còn subcribe đến cache data `['todos']` nữa nên data `['todos']` bị cho là `inactive` - Vì `inactive` nên `cacheTime` sẽ bắt đầu đếm ngược 5 phút - Trước khi `cacheTime` hết thì ông `C` comopnent được mount. cache data `['todos']` được trả về ngay lập tức cho `C` và `fetchTodos` sẽ chạy ngầm. Khi nó hoàn thành thì sẽ cập nhật lại cache với data mới. - Cuối cùng thì `C` unmount - Không còn ai subcribe đến cache data `['todos']` trong 5 phút tiếp theo nữa và cache data `['todos']` bị xóa hoàn toàn

Pagination

- Check axios error & handle error 422 => Type predicates Type predicates are always attached to a function that takes a single argument and returns a boolean. Type predicates are expressed as argumentName is Type.   + use setError (react-hook-form):  - Handle nomal error with interceptor 

- Fetching Indicators   - Query Cancellation + Manual Cancellation  + Auto Cancellation  

The most common reason to use middleware is to allow different kinds of async logic to interact with the store.

- Dispatch action processing 2 time because React.StrictMode -> run 2 time to check - Pending 1: + Was cancel by return in useEffect() + So that it return a reject async - Pending 2: + return a fulfilled async => .addMatcher<PendingAction>( (action) => action.type.endsWith('/pending'), (state, action) => { state.loading = true state.currentRequestId = action.meta.requestId } ) .addMatcher<RejectedAction | FulfilledAction>( (action) => action.type.endsWith('/rejected') || action.type.endsWith('/fulfilled'), (state, action) => { if (state.loading && state.currentRequestId === action.meta.requestId) { state.loading = false state.currentRequestId = undefined } } ) - unwrap(): to get data from asyncThunk or get data after dispatch 

RTK Query is a library of Redux ecosystem support managing call API and caching. Tracking loading state in order to show UI spinners Avoiding duplicate requests for the same data Optimistic updates to make the UI feel faster Managing cache lifetimes as the user interacts with the UI  

Handle error

Caching, refetch

HOF is a function that - its argument is a function - or it return a function. Ex: .map(); .forEach(); .filter() / Curry func

Higher order Component: is a function that takes a component as a variable and return a new component. Ex: `connect(mapStateToProps, mapDispatchToProps)(UserPage)` - react-redux, `withRouter(UserPage)` - react-router, `withStyles(styles)(UserPage)` - material-ui *** Should not use HOC inside render method or function component. (S.116-video) *** UseCase: + Wanna re-use logic 1. React.memo : is used when you dont wanna your component re-render while parent component re-render - Is a HOC -> Wrap with your component ex: export default React.memo(childComponent) **Cons of react.memo: + React.memo use RAM to save data -> if we use memo to improve performance, it will consumes a lot of ram memory + React.memo will check its props after parent re-render -> when parent props a reference type (function, object, array), child comp still re-render though was wrapped by memo (https://www.youtube.com/watch?v=_aiLvBnYwnA) => ~ add one more parameter of React.memo() (reading docs) ~ useCallback() or useMemo() instead (useMemo returns memoized value and useCallback returns memoised function.) ~ useCallback ususally with react.memo() if not, useCallback is meaningless (F8) (once without react.memo, child component still re-render -> func re-render)