## useRef

`useRef` là một hook lưu trữ một biến có thể mutate hoặc cho phép chúng ta truy cập DOM node

#### Mutate là gì?

Mutate là chúng ta thay đổi giá trị bên trong object mà không làm thay đổi tham chiếu của nó.

```js
const A = { name: 'lam' }
const B = A
A.name = 'hoang' // Chúng ta đang mutate A
console.log(A === B) // true vì tham chiếu A và B giống nhau
```

#### State hay prop thì không được mutate

Đối với React thì chúng ta dùng state để lưu trữ những giá trị có thể thay đổi theo thời gian, và chúng ta không mutate state, chúng ta **thay thế state** bằng một giá trị mới với tham chiếu mới kết hợp dùng set state để nói cho React biết

```jsx
const [todo, setTodo] = useState({ name: 'Hoc Bai', time: '08:20:PM' })

const handleClick = () => {
  // todo.name = 'Tap Gym' // Chúng ta không mutate như thế này!
  setState((prev) => ({ ...prev, name: 'Tap Gym' })) // Chúng ta set state với một giá trị object mới khác tham chiếu object cũ
}
```

Việc cập nhật state sẽ làm component re-render
Tất nhiên là về mặc lý thuyết chúng ta vẫn có thể mutate state trong trường hợp chúng ta không muốn component re-render, nhưng không nên làm vậy, vì chúng ta sẽ không kiểm soát được state, rất dễ sinh bug. Và useState của react không sinh ra để chúng ta làm vậy
Giờ đặt vấn đề ra thì có cách nào để mutate biến mà không làm component render hay không?

#### Tạo biến trong component

```jsx
function Todo() {
  // khi component re-render vì lý do nào đó (state, props,...) thì todo sẽ bị assign lại
  const todo = { name: 'Hoc Bai', time: '08:20:PM' }

  const handleClick = () => {
    // mutate như thế này sẽ không làm component re-render
    todo.name = 'Tap Gym'
  }
}
```

#### Tạo biến ngoài component

```jsx
// Biến todo có thể bị dùng ở bất kỳ đâu vì nó nằm ngoài function
// Trong khi biến này chỉ sinh ra để phục phụ cho funciton Todo
const todo = { name: 'Hoc Bai', time: '08:20:PM' }

function Todo() {
  const handleClick = () => {
    // mutate như thế này sẽ không làm component re-render
    todo.name = 'Tap Gym'
  }
}
```

### useRef giúp tạo biến có thể mutate mà không làm component re-render

useRef return một ref object với thuộc tính current duy nhất được set theo giá trị khởi tạo mà chúng ta cung cấp.

```jsx
import { useRef } from 'react'

export default function Counter() {
  let ref = useRef(0)

  function handleClick() {
    ref.current = ref.current + 1
    alert('You clicked ' + ref.current + ' times!')
  }

  return <button onClick={handleClick}>Click me!</button>
}
```

Một số điểm đặc biệt của ref

- Tham chiếu ref sẽ không thay đổi mỗi khi re-render (không như biến thông thường, bị reset mỗi khi re-render)
- Thay đổi nó sẽ không làm re-render (không như state - làm re-render)
- Thông tin được bao gói bên trong component (không như biến bên ngoài, bị chia sẻ nhiều chỗ khác dùng được)

### Cạm bẩy khi dùng useRef

Đừng nên ghi hay đọc `ref.current` suốt quá trình render. Đây là **nguyên tắc React**!

```jsx
function MyComponent() {
  const myRef = useRef(100)

  // 🚩 Không ghi ref suốt quá trình render
  myRef.current = 123
  // ...
  // 🚩 Không đọc ref suốt quá trình render
  return <h1>{myOtherRef.current}</h1>
}
```

Bạn có thể đọc và ghi trong event handler hay `useEffect`

```jsx
function MyComponent() {
  // ...
  useEffect(() => {
    // ✅ You can read or write refs in effects
    myRef.current = 123
  })

  function handleClick() {
    // ✅ You can read or write refs in event handlers
    doSomething(myOtherRef.current)
  }
  // ...
}
```

Nếu bạn phải đọc và ghi thứ gì đó suốt quá trình render, sử dụng `useState`
Khi bạn phớ vỡ những rule này, component của bạn có thể vẫn hoạt động nhưng dễ gây ra bug. Tất cả tính năng mà React thêm vào đều dựa trên nguyên tắc là pure component

## Truy cập DOM nodes hoặc React elements

Nếu bạn làm việc với React được một khoảng thời gian rồi thì bạn có thể đã từng sử dụng `ref` cho việc này. Dưới đây là ví dụ về việc sử dụng `ref`:

```jsx
import React, { useRef } from 'react'
const CustomTextInput = () => {
  const textInput = useRef()
  focusTextInput = () => textInput.current.focus()
  return (
    <>
      <input type='text' ref={textInput} />
      <button onClick={focusTextInput}>Focus the text input</button>
    </>
  )
}
```

Lưu ý là trong functional component thì chúng ta sử dụng `useRef` thay vì sử dụng `createRef`. Nếu chúng ta tạo một `ref` bằng cách sử dụng `createRef` trong một functional component, React sẽ tạo mới một instance `ref` mỗi lần re-render thay vì giữ nguyên instance xuyên suốt các quá trình render.

## forwardRef là gì

Như chúng ta đã tìm hiểu bên trên thì ref giúp chúng ta truy cập đến một element, vậy nó có thể truy cập đến một component React hay không? test thử nhé

```jsx
import React from 'react'
const Input = () => <input type='text' style={style} />
export default Input
```

```jsx
import React, { useRef, useEffect } from 'react'
import Input from './Input'
function App() {
  const inputRef = useRef(null)
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus()
    }
    console.log({ inputRef })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <div>
      <Input ref={inputRef} />
    </div>
  )
}
export default App
```

Chúng ta sẽ nhận một thông báo tham chiếu đến **Input Component** là null
Để fix vấn đề này ta dùng `forwardRef` như một HOC cho **Input Component**

```jsx
import React, { forwardRef } from 'react'
const Input = (props, ref) => <input ref={ref} type='text' style={style} />
export default forwardRef(Input)
```

Trong bài viết này mình sẽ cùng các bạn tìm hiểu về một thành phần khá quan trọng và được rất nhiều trong các dự án React , đó chính là Refs

Sử dụng Ref , useRef và forwardRef trong React

## useReducer là gì

`useReducer` là một hook dùng để gom logic các `useState` lại với nhau thành một chỗ.

Đối với `useState` thì muốn cập nhật state ta cần

1. gọi set state function với mới value mới
2. state đã cập nhật

Đối với `useReducer` thì dài hơn 1 tí

1. Gọi dispatch function với value là action (action có thể là object hoặc string)

2. Reducer tính toán state mới dựa vào action nhận

3. state đã cập nhật

```jsx
const [state, dispatch] = useReducer(reducer, initialArg, init?)
```

- `reducer`: là một function dạng

```jsx
function reducer(state, action) {
  // ...
}
```

- `initialArg` là giá trị state khởi tạo, tương tự bên `useState(initialArg)`. Vì vậy nên behavior tương tượng bên useState, tránh gọi function bên trong này để không bị gọi liên tục mỗi lần re-render: `useReducer(reducer, caculate(initialArg))`

- `init`: Đây là optional, nó là một function, nếu truyền vào thì khi `useReducer` được gọi, giá trị khởi tạo của bạn sẽ là `init(initialArg)`, còn không thì là `initialArg` thôi!

## Cách dùng

```jsx
import { useReducer } from 'react'

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    }
  }
  throw Error('Unknown action.')
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 })
  return (
    <>
      <button
        onClick={() => {
          dispatch({ type: 'incremented_age' })
        }}
      >
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  )
}
```

## Một số lỗi cần tránh khi làm việc với useReducer

Thực ra là lỗi chung khi làm việc với react, chứ không riêng reducer, nếu anh em làm với state thì cũng bị lỗi thôi.

### Log state rồi nhưng tại sao ra giá trị cũ?

Gọi `dispatch` function nhưng không change state?

```jsx
function handleClick() {
  console.log(state.age) // 42

  dispatch({ type: 'incremented_age' }) // Request a re-render with 43
  console.log(state.age) // Still 42!

  setTimeout(() => {
    console.log(state.age) // Also 42!
  }, 5000)
}
```

Một lần nữa, cơ chế nó giống set state thôi, các bạn có thể hiểu như là nó **bất đồng bộ** (nhưng thực ra nó phức tạp hơn thế, nó sử dụng cơ chế closure).

Muốn nhận được giá trị thì có thể thử cách này

```jsx
const action = { type: 'incremented_age' }
dispatch(action)

const nextState = reducer(state, action)
console.log(state) // { age: 42 }
console.log(nextState) // { age: 43 }
```

### Dispatch rồi nhưng screen không cập nhật

Mutate state trong react thì bị nghiêm cấm!

```jsx
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // 🚩 Wrong: mutating existing object
      state.age++
      return state
    }
    case 'changed_name': {
      // 🚩 Wrong: mutating existing object
      state.name = action.nextName
      return state
    }
    // ...
  }
}
```

Hãy trả về một object mới thay vì mutate

```jsx
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ✅ Correct: creating a new object
      return {
        ...state,
        age: state.age + 1
      }
    }
    case 'changed_name': {
      // ✅ Correct: creating a new object
      return {
        ...state,
        name: action.nextName
      }
    }
    // ...
  }
}
```

Kể từ phiên bản 16.8 React hỗ trợ Hooks. Một trong số đó là hook useReducer hoạt động theo một cách rất giống với Redux

useReducer là gì? Tại sao phải sử dụng useReducer?

Tổng hợp những kiến thức quan trọng về Redux

Redux & Redux Toolkit

## Overview
- Link download extension: [Marketplace](https://marketplace.visualstudio.com/items?itemName=NguyenHoangLam.beautiful-dracula)
- My theme based on [dracula-official](https://github.com/dracula/dracula-theme) and [evondev-dracula](https://github.com/evondev/evondev-dracula)

## Some of images
![review-javascript](https://raw.githubusercontent.com/lamhoang1256/beautiful-dracula/main/screenshots/review-javascript.png)
![review-sass](https://raw.githubusercontent.com/lamhoang1256/beautiful-dracula/main/screenshots/review-sass.png)
![review-html](https://raw.githubusercontent.com/lamhoang1256/beautiful-dracula/main/screenshots/review-html.png)

## Samantic Syntax Highlight

![review-samantic-highlight](https://raw.githubusercontent.com/lamhoang1256/beautiful-dracula/main/screenshots/review-semantic-highlight.png)

## Installation

1. Open Extensions sidebar panel in VS Code. **View → Extensions**
2. Search for **Beautiful Dracula**
3. Click **Install** to install it.
4. Click **Reload** to reload the editor.
5. File > Preferences > Color Theme > Beautiful Dracula Normal

## Scheme color

- Beautiful Dracula Normal
- Beautiful Dracula Normal - No Highlight
- Beautiful Dracula Darker
- Beautiful Dracula Darker - No Highlight

## Font I'm using

I use [JetBrains Mono](https://www.jetbrains.com/lp/mono/).

## Thank you for installing and using my theme ❤️


Yet another base on Dracula Official Theme fork, but better (in my opinion)

Beautiful Dracula Theme for Visual Studio Code 😍

## useContext là gì?

`useContext` nằm trong Context API của React, giúp chúng ta không còn cảnh truyền prop dài loằn ngoằn từ ông -> cha -> con -> chắt nữa.

## Cách dùng useContext

1. Tạo context bằng `createContext`

```jsx
const CountContext = createContext(null);
```

2. Dùng một Provider bao bọc component muốn dùng, chỉ cần component nằm trong Provider là dùng được hết!

```jsx
const CountContext = createContext(null);

export default function App() {
  const [count, setCount] = useState(0);
  const value = [count, setCount];
  return (
    <CountContext.Provider value={value}>
      <CountDisplay></CountDisplay>
      <Counter></Counter>
    </CountContext.Provider>
  );
}
```

Provider nhận vào một prop là `value`, vì thế CountDisplay và Counter component có thể nhận value này thông qua context

3. Nhận context bằng `useContext()`, để tiện hơn mình sẽ tạo một hook useCount để nhận dữ liệu từ CountContext

```jsx
import { createContext, useContext } from "react";

const CountContext = createContext(null);

const useCount = () => {
  const context = useContext(CountContext);
  if (typeof context === "undefined"){
    throw new Error("useCount must be used within a CountProvider");
  }
  return context;
}

export default function App() {
  const [count, setCount] = useState(0);
  const value = [count, setCount];
  return (
    <CountContext.Provider value={value}>
      <CountDisplay></CountDisplay>
      <Counter></Counter>
    </CountContext.Provider>
  );
}

const CountDisplay = () => {
  const [count] = useCount();
  return <div>The count is: {count}</div>;
};

const Counter = () => {
  const [, setCount] = useCount();
  const increment = () => setCount((prevCount) => prevCount + 1);
  return <button onClick={increment}>Increment count</button>;
};
```

## Lưu ý khi dùng useContext

- Provider gần nhất sẽ override Provider xa hơn. Ví dụ dưới đây, Page sẽ nhận `value` từ context là "light"

```jsx
<ThemeContext.Provider value="dark">
  ...
  <ThemeContext.Provider value="light">
    <Page />
  </ThemeContext.Provider>
  ...
</ThemeContext.Provider>
```

- Nhớ truyền `value` vào Provider, không truyền `value` vào thì nó sẽ lấy giá trị mặc định mà chúng ta khởi tạo từ đầu

- Không nên **truyền thẳng một object** vào `value` ở Provider, vì mỗi lần re-render sẽ là một object mới, dẫn đến component trong Provider của chúng ta bị re-render do value context thay đổi

```jsx
function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const handleLogin = (response) => {
    setCurrentUser(response.user);
  }
  return (
    <AuthContext.Provider value={{ currentUser, login }}>
      <Page />
    </AuthContext.Provider>
  );
}
```

Nên truyền như thế này

```jsx
import { useCallback, useMemo } from "react";

function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const handleLogin = (response) => {
    setCurrentUser(response.user);
  }
  const contextValue = useMemo(
    () => ({ currentUser, handleLogin }),
    [currentUser, handleLogin]
  );
  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}
```


useContext nằm trong Context API của React, giúp chúng ta không còn cảnh truyền prop dài loằn ngoằn từ ông -> cha -> con -> chắt nữa.

useContext

## Kiểu tham trị (primitive types)

Có những kiểu dưới đây:

1. number
2. string
3. boolean
4. null
5. undefined
6. BigInt
7. Symbol

### Việc copy biến với tham trị

```js
let message = 'Hello!'
let phrase = message
```

Chúng ta có 2 biến độc lập, **mỗi biến đều chứa giá trị là `"Hello"`**

![](https://raw.githubusercontent.com/ChauVanLoc/React-Awesome-Training/1b373b2ab4f9da9e2769f4c8c3807c9132fc417c/KienThucJavascript/ThamTri_ThamChieu/variable-copy-value.svg)

## Kiểu tham chiếu (reference types)

1. object
2. array
3. function

Thực ra array & function về bản chất vẫn là object cả thôi.

### Việc copy biến với tham chiếu

Object thì không giống như các kiểu dữ liệu của tham trị.
**Một biến object không lưu trữ giá trị, nó lưu trữ "địa chỉ bộ nhớ" - hay còn gọi là nó tham chiếu đến ô nhớ**

`user` là biến object

```js
let user = {
  name: 'John'
}
```

![](https://raw.githubusercontent.com/ChauVanLoc/React-Awesome-Training/1b373b2ab4f9da9e2769f4c8c3807c9132fc417c/KienThucJavascript/ThamTri_ThamChieu/variable-contains-reference.svg)

Object thì được lưu trữ đâu đó trong bộ nhớ (bên phải hình), còn biến `user` thì tham chiếu đến nó.

**Khi chúng ta copy một biến object, tham chiếu của nó sẽ bị copy, object không bị nhân đôi lên**

```js
let user = { name: 'John' }
let admin = user // copy the reference
```

Bây giờ chúng ta có 2 biến đều tham chiếu đến cùng một object

![](https://raw.githubusercontent.com/ChauVanLoc/React-Awesome-Training/1b373b2ab4f9da9e2769f4c8c3807c9132fc417c/KienThucJavascript/ThamTri_ThamChieu/variable-copy-value.svg)

Chúng ta có thể sử dụng biến để truy cập đến object và chỉnh sửa chúng

```js
let user = { name: 'John' }
let admin = user

admin.name = 'Pete' // changed by the "admin" reference
console.log(user.name) // 'Pete', changes are seen from the "user" reference
```

### So sánh với tham chiếu

2 object chỉ bằng nhau khi nó cùng một object
Ví dụ `a` và `b` cùng tham chiếu đến một object nên nó bằng nhau

```js
let a = {}
let b = a // copy the reference

console.log(a == b) // true, both variables reference the same object
console.log(a === b) // true
```

Và dưới đây là 2 object độc lập, dù cho chúng nhìn có vẻ giống nhau thì chúng cũng không bằng nhau

```js
let a = {}
let b = {}

console.log(a == b) // false
console.log(a === b) // false
```

### Clone và merge

Copy một biến object sẽ tạo thêm 1 biến khác tham chiếu đến cùng object đó
Nhưng trong nhiều trường hợp chúng ta cần nhân đôi một object để khi chỉnh sửa biến này thì không ảnh hưởng đến biến kia. Chúng ta gọi cái này là **clone**

Clone thường có 2 loại là

- clone thường (cũng có thể gọi là shallow copy)
- deep clone (cũng có thể gọi là deep copy)

Với clone thường thì người ta thường dùng **spread syntax** để clone `clone = {...user}`

```js
let user = {
  name: 'John',
  age: 30
}

// Bây giờ clone là một object độc lập với cùng nội dung với user
let clone = { ...user }
clone.name = 'Peter'
console.log(user.name) // Vẫn là John trong object gốc
```

Hoặc sài vòng lặp

```js
let user = {
  name: 'John',
  age: 30
}

let clone = {} // một object rỗng

// Cùng copy các thuộc tính nào
for (let key in user) {
  clone[key] = user[key]
}
clone.name = 'Pete'
console.log(user.name) // Vẫn là John trong object gốc
```

Clone thường chỉ hiệu quả với những object 1 cấp, những object nested nhiều cấp thì phải deep clone

### Deep clone

Những ví dụ với biến object `user` trên thì các thuộc tính bên trong đều là tham trị. Nhưng các thuộc tính cũng có thể tham chiếu đến một object khác.

Như thế này:

```js
let user = {
  name: 'John',
  sizes: {
    height: 182,
    width: 50
  }
}

console.log(user.sizes.height) // 182
```

Bây giờ clone với cách thông thường không thể copy nổi `user.sizes` bởi vì nó là một object, nếu copy thì nó sẽ bị tham chiếu và `clone.sizes` và `user.sizes` sẽ cùng tham chiếu đến một địa chỉ ô nhớ (một object)

```js
let user = {
  name: 'John',
  sizes: {
    height: 182,
    width: 50
  }
}

let clone = { ...user }

console.log(user.sizes === clone.sizes) // true, Vì cùng object

// user và clone chia sẻ sizes
user.sizes.width++ // Thay đổi thuộc tính từ một nơi
console.log(clone.sizes.width) // 51, Tại nơi khác kết quả cũng bị thay đổi theo
```

Để fix vấn đề này thì chúng ta có thể dùng một số phương pháp dưới đây

- `JSON.parse(JSON.stringify())`
- Dùng method [\_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) của thư viện Lodash (sâu bên trong nó dùng đệ quy để lặp các thuộc tính bên trong object)
- Dùng các thư viện như [immer](https://immerjs.github.io/immer/). Thư viện này khá hiệu quả vì đôi lúc chúng ta cũng không cần thiết clone hết cả một object lớn để chỉnh sửa 1 vài thuộc tính, cơ chế của cái này là chỉnh sửa thuộc tính nào thì nó sẽ tự tính và clone cho đúng thôi. Vậy nên giúp cải thiện về mặt performance trong một số trường hợp.

#### Lưu ý: Const object cũng có thể chỉnh sửa

Giá trị của user là không thay đổi, nhưng object bên trong nó thì tự do, muốn làm gì cũng đc.

```js
const user = {
  name: 'John'
}

user.name = 'Pete' // (*)

console.log(user.name) // Pete
```

Nó chỉ lỗi khi chúng ta set `user=...` thôi.

Trong JavaScript, ta có hai kiểu dữ liệu chính là: kiểu dữ liệu nguyên thủy (Primitive data type) và kiểu dữ liệu object (Non-primitive data type).

Posts