react hooks

[Hoa0304]

1. React hooks là gì?

• Feature mới được add vào từ version 16.8 của React.
• Giúp mình có thể dùng state, life cycle và các features khác của React mà không cần dùng tới class.
• Hooks có thể hiểu nôm na là một cái function được hook-into vào các features của React và sẽ được gọi khi cần thiết.

2. Khi nào dùng hooks?

• Khi muốn dùng state, life cycle, ... mà không thích làm việc với class (OOP).
• NHỚ: Chỉ sử dụng được cho functional component, không dùng cho class.

3. Ai thích sử dụng hooks?

• OOP vs FP (cuộc chiến không hồi kết thúc)
• Không thể là ai khác ngoài tín đồ của Functional Programming.

4. Tại sao nên dùng hooks?

• No breaking changes.
• Có thể dùng vừa class component cũ, vừa dùng thử nghiệm react hooks cho component mới.
• Loại bỏ rào cản OOP. (this, super(props), ...)
• Không có kế hoạch để bỏ class component.
• Không xoá bỏ kiến thức bạn đã biết về React: state, life cycles, context, ...

5. Sử dụng hooks như thế nào?

   • useState()
   • useEffect()
   • useContext()
   • useReducer()
   • useSelector(), useDispatch()
   • Chia sẻ logic giữa các component với custom hooks.
   • ...

6. ❓Có nên viết lại code life cycle thành hooks không?

• Tuỳ . Nhưng khuyến khích là không nên.
• Chỉ refactorlại những component quá phức tạp.
• Thử nghiệm với component mới.

[Hoa0304]

useSate():

• Là một hook cơ bản.

• Giúp mình có thể dùng state trong functional component.

• Input: initialState (giá trị hoặc function)

• Output: một mảng có 2 phần tử tương ứng cho state và setState

• Cách dùng: const [name, setName] = useState('Hoa');

• Note:

  • useState() giúp functional component có thể dùng state.
  • useState() trả về một mảng 2 phần tử [name, setName].
  • useState() áp dụng replacing thay vì merging như bên class component.
  • Initial state callback chỉ thực thi 1 lần đầu.

[Hoa0304]

1. Side effect là gì? Có bao nhiêu loại?

• Side effects là gì?
  • Gọi API lấy dữ liệu.
  • Tương tác với DOM.
  • Subscriptions.
  • setTimeout, setInterval.

• Theo tài liệu chính thức thì chia làm 2 loại side effects:

  1. Effects không cần clean up: gọi API, tương tác DOM
  2. Effects cần clean up: subscriptions, setTimeout, setInterval.

2. Giới thiệu hook useEffect()

• Là một hook cơ bản trong React hooks.
• Sử dụng cho side effects.
• Mỗi hook gồm 2 phần: side effect và clean up (optional)
• Được thực thi sau mỗi lần render.
• Được thực thi ít nhất một lần sau lần render đầu tiên.
• Những lần render sau, chỉ được thực thi nếu có dependencies thay đổi.
• Effect cleanup sẽ được thực thi trước run effect lần tiếp theo hoặc unmount.

3. Dùng useEffect() kèm điều kiện (#6)
4. Dùng useEffect() không có cleanup (#6)
5. Dùng useEffect() có cleanup (#6)
6. Chuyển từ life cycles sang useEffect() hook (#6)
7. 📝 Những lưu ý cần nhớ

• Side effect là gì? Có bao nhiêu loại?
• Có thể kèm điều kiện để thực thi useEffect()
• Có thể dùng nhiều useEffect()
• Tư duy về side effects khi dùng useEffect() hook, thay vì life cycle.

[Hoa0304]

Custom hooks 🚀

1. Custom hooks là gì?

• Một hook do mình tự định nghĩa ra.
• Custom hook là một function hơi đặc biệt.
• Có thể sử dụng các hooks khác như useState, useEffect, ... hoặc một custom hook khác.
• Đặt tên custom hooks theo dạng: useClock(), useClickOutside(), useQuery(), ...

2. Khi nào dùng custom hooks?

• Tách riêng biệt phần logic ra khỏi phần UI.
• Chia sẻ logic giữa các component.

Notes📝:

• Dùng custom hooks tách logic ra khỏi UI để tái sử dụng.
• Custom hooks là một function đặc biệt sử dụng được hooks khác.
• Custom hooks return data thay vì JSX như component.

[Hoa0304]

useCallback() vs useMemo()

1. useCallback() là gì?

   Là mộtreact hooks giúp mình tạo ra một memoized callback và chỉ tạo ra callback mới khi dependencies thay đổi.

   • Nhận vào 2 tham số: 1 là function, 2 là dependencies.
   • Return memoized callback
   • Chỉ tạo ra function mới khi dependencies thay đổi.
   • Nếu dùng empty dependencies thì không bao giờ tạo ra function mới.

2. useMemo() là gì?

   Là mộtreact hooks giúp mình tạo ra một memoized value và chỉ tính toán ra value mới khi dependencies thay đổi.

   • Nhận vào 2 tham số: 1 là function, 2 là dependencies.
   • Return memoized value
   • Chỉ tính toán value mới khi dependencies thay đổi.
   • Nếu dùng empty dependencies thì không bao giờ tính toán lại value mới.

3. So sánh useCallback() vs useMemo() GIỐNG NHAU

   • Đều áp dụng kĩ thuật memoization.
   • Đều nhận vào 2 tham số: function và dependencies.
   • Đều là react hooks, dùng cho functional component.
   • Dùng để hạn chế những lần re-render dư thừa (micro improvements).

KHÁC NHAU

#	useCallback()	useMemo()
return	memoized callback	memoized value
code	useCallback((type) => {}, [])	useMemo(() => [{}, {}, {}], [])

4. Có nên sử dụng useCallback() vs useMemo() hay không?

• Không nên dùng cho tất cả components.
• Nên dùng cho: đồ thị, biểu đồ, animations, những component nặng phần render.
• Chỉ là micro improvements.