Câu hỏi và câu trả lời phỏng vấn Reactjs – Advanced Level

Trong bài viết này mình sẽ gửi đến các bạn bộ câu hỏi và câu trả lời thường được hỏi nhất trong các buổi phỏng vấn.

1. Custom hook là gì?

Custom hook là các hàm JavaScript thông thường có tên bắt đầu bằng “use” và chúng có thể gọi các hooks khác. Chúng ta sử dụng hooks tùy chỉnh để duy trì nguyên tắc DRY, tức là Don’t Repeat Yourself (Không Lặp Lại Chính Mình). Điều này giúp chúng ta viết một logic một lần và sử dụng nó ở bất kỳ đâu trong mã.

2. Làm thế nào để tối ưu hóa code React?

Chúng ta có thể cải thiện mã React của mình bằng cách làm theo các thực hành sau:

• Sử dụng các hàm binding trong constructors
• Loại bỏ việc sử dụng các thuộc tính inline vì chúng làm chậm quá trình tải
• Tránh các thẻ không cần thiết bằng cách sử dụng React fragments
• Sử dụng lazy loading

3. Sự khác biệt giữa useRef và createRef trong React?

4. React-Redux là gì?

React-redux là một công cụ quản lý trạng thái giúp dễ dàng chuyển các trạng thái này từ component này sang component khác bất kể vị trí của chúng trong cây component và do đó ngăn ngừa sự phức tạp của ứng dụng. Khi số lượng component trong ứng dụng của chúng ta tăng lên, việc chuyển trạng thái dưới dạng props cho nhiều component trở nên khó khăn. Để khắc phục tình huống này, chúng ta sử dụng react-redux.

5. Những lợi ích khi sử dụng React-Redux?

Có nhiều lợi ích của việc sử dụng react-redux như:

• Cung cấp sự quản lý trạng thái tập trung, tức là một store duy nhất cho toàn bộ ứng dụng.
• Tối ưu hóa hiệu suất vì ngăn chặn việc re-render của component.
• Giúp quá trình debug trở nên dễ dàng hơn.
• Vì nó cung cấp quản lý trạng thái liên tục nên việc lưu trữ dữ liệu trong thời gian dài trở nên dễ dàng hơn.

6. Bạn hãy giải thích các thành phần cốt lõi của react-redux?

• Redux Store: Đây là một đối tượng giữ trạng thái của ứng dụng.
• Action Creators: Đây là các hàm trả về các action (đối tượng).
• Actions: Actions là các đối tượng đơn giản, thường có hai thuộc tính là type và payload.
• Reducers: Reducers là các hàm thuần túy cập nhật trạng thái của ứng dụng theo phản hồi từ các actions.

7. Chúng ta có thể kết hợp nhiều reducers trong React như thế nào?

Để quản lý nhiều reducers, chúng ta có một hàm gọi là combineReducers trong Redux. Hàm này giúp kết hợp nhiều reducers thành một đơn vị duy nhất và sử dụng chúng.

import { combineReducers } from "redux";
const rootReducer = combineReducers({
    books: BooksReducer,
    activeBook: ActiveBook
});

8. Context API là gì?

Context API được sử dụng để truyền các biến toàn cục đến bất kỳ đâu trong mã. Nó rất hữu ích khi cần chia sẻ trạng thái giữa nhiều component lồng nhau. Context API nhẹ và dễ sử dụng; để tạo một context, bạn chỉ cần gọi React.createContext(). Nó loại bỏ nhu cầu cài đặt các phụ thuộc hoặc thư viện bên thứ ba như redux để quản lý trạng thái. Context API có hai thuộc tính là Provider và Consumer.

9. Giải thích Consumer và Provider trong context API ?

Một Provider được sử dụng để cung cấp context cho toàn bộ ứng dụng, trong khi một Consumer tiêu thụ context do Provider gần nhất cung cấp. Nói cách khác, Provider hoạt động như một component cha, nó truyền trạng thái cho các component con của nó, trong khi Consumer sử dụng trạng thái đã được truyền.

10. Giải thích CORS trong React?

Trong ReactJS, Cross-Origin Resource Sharing (CORS) đề cập đến phương pháp cho phép bạn thực hiện các yêu cầu tới máy chủ được triển khai tại một miền khác. Ví dụ, nếu frontend và backend ở hai miền khác nhau, chúng ta cần CORS ở đó.

Chúng ta có thể thiết lập môi trường CORS ở frontend bằng hai phương pháp:

1. Axios: Thư viện axios hỗ trợ CORS bằng cách cấu hình các tùy chọn yêu cầu HTTP, bao gồm headers cho phép cấu hình các thông tin liên quan đến CORS.
2. Fetch: API fetch cũng hỗ trợ CORS qua các tùy chọn cấu hình yêu cầu, trong đó bạn có thể thiết lập các thuộc tính như mode để chỉ định cách yêu cầu sẽ xử lý CORS.

11. AXIOS là gì và cách sử dụng?

Axios, là một thư viện phổ biến, chủ yếu được sử dụng để gửi các yêu cầu HTTP bất đồng bộ đến các REST endpoints. Thư viện này rất hữu ích để thực hiện các thao tác CRUD.

Thư viện phổ biến này được sử dụng để giao tiếp với backend. Axios hỗ trợ Promise API, vốn có sẵn trong JS ES6. Khi sử dụng Axios, chúng ta thực hiện các yêu cầu API trong ứng dụng của mình. Sau khi yêu cầu được gửi, chúng ta nhận được dữ liệu trả về và sau đó sử dụng dữ liệu này trong dự án của mình.

12. Giải thích và nêu cách cập nhật trạng thái của các component bằng cách sử dụng callback?

Việc sử dụng callback để cập nhật trạng thái bằng setState được khuyến khích vì nó giúp giải quyết nhiều lỗi có thể xảy ra trong tương lai. Cách sử dụng callback để cập nhật trạng thái:

this.setState(st => {
    return(
        st.stateName1 = state1UpdatedValue,
        st.stateName2 = state2UpdatedValue
    )
})

13. Kiến trúc Flux trong Redux là gì?

Flux là một kiến trúc mà Facebook sử dụng nội bộ khi làm việc với React. Đây là một sự thay thế cho một kiến trúc cũ hơn, giúp cải thiện React và đồng thời thúc đẩy ý tưởng về dòng dữ liệu đơn chiều.

14. Giải thích hook useMemo trong React?

Hook useMemo là một hook được sử dụng trong các component hàm của React để trả về một giá trị đã được ghi nhớ (memoized). Trong Khoa học Máy tính, memoization là một khái niệm được sử dụng khi chúng ta không cần phải tính toán lại hàm với một đối số nhất định lần sau vì nó trả về kết quả đã được lưu trong bộ nhớ cache. Một hàm đã được memoize sẽ ghi nhớ các kết quả đầu ra cho một tập hợp các đầu vào nhất định.

15. Hook useState của React có cập nhật ngay lập tức không?
Không, mặc dù có vẻ như vậy khi nhìn bề ngoài. React quản lý các trạng thái bằng cách xếp chúng vào hàng đợi theo thứ tự chúng được gọi. Thay vì cập nhật ngay lập tức, React lưu các thay đổi vào hàng đợi và chỉ cập nhật khi component được re-render. Đây là cách mà React xác định giá trị nào thuộc về trạng thái nào, thực hiện theo hàng đợi mỗi khi component re-render.

16. Khi nào nên sử dụng useCallback, useMemo và useEffect?

• useCallback: Sử dụng khi bạn cần ghi nhớ một hàm và muốn tránh việc tạo ra một hàm mới trong mỗi lần render. Điều này giúp tránh việc các component con không cần phải re-render lại nếu hàm không thay đổi. Thường được dùng khi bạn truyền hàm như là prop cho các component con.

• useMemo: Sử dụng khi bạn có phép tính tốn kém mà bạn không muốn tính toán lại trừ khi các phụ thuộc thay đổi. useMemo giúp ghi nhớ kết quả của phép tính và chỉ tính toán lại khi các giá trị phụ thuộc thay đổi.

• useEffect: Sử dụng khi bạn cần thực hiện các hiệu ứng phụ (side effects) trong component, chẳng hạn như gửi yêu cầu HTTP, cập nhật DOM, hoặc đăng ký sự kiện. useEffect được gọi sau khi render và có thể được cấu hình để chạy lại khi các phụ thuộc thay đổi.

Bài viết được dịch từ geeksforgeeks