# Interview question React 2.0
##### tags : `interview` `react`

## 1. Controlled component / Uncontrolled component là gì ?
- Controlled component :
- Là component kiểm soát dc thường là làm việc với form trong reactjs (input,textarea,...) thông qua state.

==Example:==

function ControlledComponentExample() {
  // Sử dụng state để quản lý giá trị của input
  const [inputValue, setInputValue] = useState('');
  // Hàm xử lý sự kiện thay đổi giá trị input
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  }
  // Hàm xử lý khi người dùng nhấn nút
  const handleButtonClick = () => {
    alert(`Giá trị input: ${inputValue}`);
  }
  return (
    <div>
      {/* Sử dụng giá trị và hàm xử lý thay đổi từ state */}
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />

      {/* Nút để hiển thị giá trị của input */}
      <button onClick={handleButtonClick}>Hiển thị Giá trị</button>
    </div>
  );
}

- Uncontrolled component :
- React ko kiểm soát dc thành phần này.

==Example==

import Chart from 'chart.js';

function UncontrolledChartExample() {
  // Sử dụng useRef để tạo một tham chiếu đến phần tử canvas cho biểu đồ
  const chartRef = useRef(null);

  useEffect(() => {
    // Tạo biểu đồ bên ngoài React, và sử dụng tham chiếu đến canvas để vẽ biểu đồ
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [
          {
            label: 'Số lượng',
            data: [12, 19, 3, 5],
          },
        ],
      },
    });
  }, []);

  return (
    <div>
      {/* Sử dụng tham chiếu để liên kết canvas cho biểu đồ */}
      <canvas ref={chartRef} width="400" height="200"></canvas>
    </div>
  );
}

==Example==

function UncontrolledComponentExample() {
  // Sử dụng useRef để tạo một tham chiếu đến phần tử input
  const inputRef = useRef(null);

  // Hàm xử lý khi người dùng nhấn nút
  const handleButtonClick = () => {
    // Truy cập giá trị của input thông qua tham chiếu
    alert(`Giá trị input: ${inputRef.current.value}`);
  }

  return (
    <div>
      {/* Sử dụng tham chiếu để liên kết input với biến tham chiếu */}
      <input type="text" ref={inputRef} />

      {/* Nút để hiển thị giá trị của input */}
      <button onClick={handleButtonClick}>Hiển thị Giá trị</button>
    </div>
  );
}

## 2. Pessimistic update / Optimistic update
- Pessimistic update : call 2 cái api
- Api thứ nhất là api thêm / xóa / sửa.
- Api thứ 2 là fetch lại toàn bộ danh sách -> thay đổi state -> cập nhật UI.
- Optimistic update : call duy nhất 1 cái api
- Call api thêm / xóa / sửa.
- Thay đổi state -> cập nhật UI.
Ví dụ : xóa 1 sản phẩm

// Pessimistic
const [list,setList] = useState([]); 
const handleDelete = async (id) =>{
    await axios.delete(`abc.com/delete/${id}`);
    const res = await axios.get(`abc.com/fetch_list`);
    setList(res.data.list);
}

// Optimistic
const [list,setList] = useState([]); 
const handleDelete = async (id) =>{
    await axios.delete(`abc.com/delete/${id}`);
    list = list.filter(item=>item.id !== id); // thay đổi state
    setList(list); 
}

**Ưu điểm:**
:::success
**Pessimistic update:** luôn bảo đảm đúng data trên UI
**Optimistic update:** hạn chế call 1 api fetch all, giảm tải cho server. Và cập nhật UI nhanh hơn Pessimistic update.
:::

**Nhược điểm**
:::danger
**Pessimistic update:** làm nặng server.
**Optimistic update:** UI trên giao diện có thể không được đúng theo thứ tự.
:::

## 3. SPA / MPA là gì ? - CSR / SSR là gì ?

SPA ( Single Page Application ),MPA ( Multi Page Application )
SEO không tốt - file html chỉ có thẻ div root,SEO tốt -> có nội dung html bên ngoài
Nhanh hơn khi sử dụng phần lớn tài nguyên dc tải trong lần đầu chỉ tải thêm khi cần. Trải nghiệm người dùng tốt đặc biệt là trên thiết bị di động =>  do chuyển trang ko cần load lại trang.,Chậm hơn khi sử dụng -> luôn tải lại toàn bộ trang khi ta chuyển hướng.
Giảm tải cho server bằng cách sử dụng công nghệ AJAX giảm số lần tải trang,,Tốn băng thông, nặng server.
Phụ thuộc hoàn toàn vào Javascript,Ko cần Javascript cg dc
Dễ dàng tái sử dụng code ( component ) tách FE vs BE thành 2 phần phát triển song song. ,FE & BE phụ thuộc vào nhau nhiều, dc đặt cùng trong 1 dự án

**Note :**
:::info
Sử dụng SPA : Google, facebook, twitter, Shoppe, 30shine, chợ tốt, zing mp3
SPA, MPA đều có thể xây dựng dựa trên SSR hoặc CSR.
:::
## 4. Em hiểu gì về State, Props. Giống và khác nhau :
- Giống : đều được sử dụng để quản lí dữ liệu trong component, và có thể re render component khi giá trị thay đổi.
- Khác :
+ State được sử dụng để lưu trữ giá trị trong 1 component, còn props có thể truyền giá trị từ component cha xuống component con.
+ State đc quản lí bởi component đó và có thể dc cập nhật thay đổi giá trị bên trong component đó, còn props dc truyền từ component cha vào component con nên nó ko thể thay đổi giá trị này dc.

## 5. React là thư viện (libary) hay framework ?
- Là thư viện JS để xây dựng UI dc phát triển bởi facebook, nhưng nói là framework cũng không hẵn là sai vì có nhiều cộng đồng support các thư viện cho react

## 6. React One way binding hay two way binding ?
- React có thể làm việc theo cả 2 hướng one way hoặc two way binding. Nhưng theo cơ chế của react thì nên dùng one way binding hơn. Vue JS là two way binding. Khi làm việc với form trong raect thì là two way binding. - dùng useState cho mấy ô input đó.

## 7. Em hiểu gì về Life cycle trong react ?*
- Life cycle nghĩa là vòng đời hay các giai đoạn mà 1 component trong react trải qua. Từ khởi tạo đến xóa khỏi cây DOM.
- Vòng đời được chia làm 3 phần chính :
1. Mounting ( khởi tạo) : Khi 1 component mới dc thêm vào DOM
. constructor(): khởi tạo component thiết lập state và props
. getDerivedStateFromProps() lấy dữ liệu props mới và cập nhật state
. render() trả về các HTML
. componentDidMount() khi component dc thêm vào DOM
2. Updating ( cập nhật ) : Khi 1 component mới dc cập nhật nhờ props hoặc state.
. getDerivedStateFromProps() : lấy dữ liệu props mới và cập nhật state
. shouldComponentUpdate() : kiểm tra xem component có update k
. render()
. getSnapShotBeforeUpdate() lưu trạng thái component trc khi cập nhật
. componentDidUpdate() : khi component đã cập nhật
3. Umouting ( xóa bỏ ) : Khi 1 component bị xóa khỏi cây DOM
. componentWillUnmount() : khi component dc xóa khỏi DOM
-> FCC sử dụng ở useEffect()

## 8. Khi thay đổi state, component render lại, có cách nào để khi thay đổi state mà component ko cần render lại không ?
- shouldComponentUpdate() => return false
- PureComponent đã tích hợp sẵn shouldComponentUpdate() nếu props hoặc state thay đổi dùng trong class component, component Header và Footer thì ko cần truyền props để tránh việc re render k cần thiết
- React.memo() bọc component và chỉ render lại component khi các props của nó thay đổi.
Khi component con ko có props thì nó ko re render nhé.

## 9. Sự khác biệt giữa useMemo và useCallback
- Giống nhau: đều là các hook giúp tối ưu hiệu suất của ứng dụng `performance`
- Khác nhau:

**a) useMemo:** được dùng để tối ưu việc tính toán giá trị của 1 biến dựa trên các giá trị phụ thuộc (bỏ vô dependencies), chỉ tính toán lại giá trị khi giá trị phụ thuộc (dependencies) thay đổi
Ví dụ : tính totalPrice => productList.reduce => chỉ khi productList thay đổi giá trị thì mới tính lại giá trị totalPrice.

const totalPrice = useMemo(()=>{
    return productList.reduce((acc,product)=> acc + product.price, 0);
},[productList])

**b) useCallback:** dc dùng để tối ưu việc khởi tạo lại các hàm callback, đặc biệt là khi các props dc truyền xuống component con, giá trị props thay đổi thì khởi tạo lại hàm handleButtonClick, giảm thiểu việc render hàm ko cần thiết.

const handleButtonClick = useCallback(() =>{
    // xử lý sự kiện
    console.log('btn click')
},[])

**Tóm lại**
:::info
1. useMemo tối ưu việc tính toán giá trị của 1 biến,
2. useCallback tối ưu việc khởi tạo các hàm callback.
3. Đều dùng để tối ưu performance web.
4. Giảm thiểu re render ko cần thiết.
:::

## 10. React hoạt động như thế nào ?
- Mỗi khi state props thay đổi react tiến hành so sánh cây dom ảo hiện tại và cây dom ảo mới, dùng thuật toán diffing (diffing algorithms - trước bảng 16. là thuật toán stack-based sau bản 16. là fiber based ) - quá trình so sánh = thuật toán này còn gọi reconciliation, (gồm 3 ví dụ về attribute trên thẻ, thẻ bộc ngoài, và key trong ul li)
- Sau khi tìm ra sự khác biệt react sẽ tiến hành cập nhật phần tử đó trên cây dom thật sử dụng toán tử so sánh ===

## 11. Phân biệt React Component/Element và Component Instance.
- React Component : là 1 phần tử UI có thể tái sử dụng, 2 loại class và function component
- React Element : là 1 đối tượng bất biến (immutable) ko thể thay đổi dc. Được tạo ra bằng cách dùng createElement() hoặc JSX
- React component instance : nó là 1 instance của react component. Gọi tên ra mà sử dụng gọi là instance ( thể hiện )
- Thêm 1 khái niệm nữa là composition là 1 component lớn chia thành nhiều component nhỏ hơn để dễ bảo trì.

## 12. Sử dụng react hook/function component thì làm sao để quản lí render ? Quản lí render ? Cách tối ưu performance ứng dụng ?
- useMemo -> tránh re render 1 biến ko cần thiết
- useCallback -> tránh render lại hàm callback
- React.memo -> tạo bản sao của component chỉ render lại khi props thay đổi.
- React.lazy

Note : classComponent -> shouldComponentUpdate() / PureComponent

## 13. UI/UX và CLI/GUI ?
- UI ( user interface ) giao diện người dùng
- UX ( user experience ) trải nghiệm người dùng
- CLI ( command line interface ) giao diện dòng lệnh
- GUI ( graphical user interface ) giao diện hình ảnh

Ví dụ : thằng CLI tạo file bằng cách dùng lệnh `touch test.txt` còn thằng GUI nó là giao diện rồi nên click chuột phải tick chọn new file => Có giao diện để mình thao tác GUI, dễ hơn so với CLI.

## 14. Thuật toán tối ưu Diffing Algorithm ( quá trình Reconciliation ) :
- Thuật toán diffing trc bản 16. là "stack-based" nó là render đồng bộ => gây hiện tượng giật lag khi dùng. Từ bản 16. trở đi, thuật toán diffing là "fiber-based" là render bất đồng bộ. Nó chia việc render ra làm 1 bước nhỏ để có thể làm các tác vụ khác.
- Reconciliation là quá trình so sánh và cập nhật các component của React. Khi state props thay đổi component render. React sẽ thực hiện quá trình này để tìm ra sự khác biệt giữa cấu trúc DOM ảo hiện tại và DOM ảo mới dc tạo ra sau khi state và props component thay đổi.
- 3 Ví dụ so sánh của chngs :

**a) khác biệt về thẻ div và span, thì component sẽ re render toàn bộ element bên trong**

<div>
    <Counter/>
</div>

<span>
    <Counter/>
</span>

**b) Có thêm class, attribute , style thì chỉ thêm hoặc xóa chỗ này và ko bị re render**

<div class="before" title="stuff"></div>

<div class="after" title="stuff"></div>

**c) Khi dùng `unshift` thêm phần tử li vào đầu mảng, nếu ko có `key`. Thì react nó ko có so sánh === dc. Nó sẽ re render lại toàn bộ li. Nhưng có key react so sánh key 2015, 2016 đã tồn tại thì sẽ ko re render nữa. Chỉ thêm key 2014 lên đầu**

<ul>
    <li key="2015">Duke</li>
    <li key="2016">Vilan</li>
</ul>

<ul>
    <li key="2014">Connect</li>
    <li key="2015">Duke</li>
    <li key="2016">Vilan</li>
</ul>

## 15. JSX là gì ?
- JSX - javascript XML Là 1 cú pháp mở rộng của JS, cho phép ta viết code HTML và JS cùng 1 tệp tin.
- Cú pháp tương tự HTML nhưng JSX là javascript, nhưng attribute phải là camel Case và class là className
- Khi chạy ứng dụng, JSX sẽ dc biên dịch thành code JS bằng Babel trc khi trình duyệt hiểu.
- Với JSX có thể giảm thiểu việc tấn công XSS.
- JSX là 1 object

const element = {
	type: 'h1',
	props : {
		className : 'greeting',
		children : 'Hello, world'
	}
}

## 16. useEffect ví dụ :
- 5 trường hợp
1. Không có mảng phụ thuộc : nó sẽ đc thực thi sau mỗi lần render của component.

    useEffect(()=>{
	//code here
    })

2. Có mảng phụ thuộc là rỗng : chỉ thực thi 1 lần sau khi component dc render lần đầu tiên và ko bao giờ thực thi lại. Call API - như componentDidMount() của class component.

    useEffect(()=>{
	//code here 
    },[])

3. useEffect có return function : Khi ta hủy bỏ component, chạy code bên trong function. -> tương tự componentWillUnmount(), thg dùng để removeEventListerner của hàm

    useEffect(()=>{
	//code here
	return ()=> {
        // code here 2
	    }
    },[])  // ko nên bỏ []

## 16. Em đã từng sử dụng các thư viện quản lí state nào ?
- Redux ( redux-saga, redux-thunk, redux-toolkit ), useContext(), react query
- Chưa dùng nhưng có những thư viên khác như : MobX, Recoil, VueX

:::warning
React query -> server state management (global state)
Redux, zustand, useContext -> client state management (global state)
useState -> local state
:::
## 17. Cơ chế so sánh của Redux :
a) Cơ chế của redux là "shallow equality" hay "shallow comparison" nghĩa là so sánh các tham chiếu ( references ) địa chỉ vùng nhớ của object đó kiểm tra xem state có thay đổi hay k.
b) state trên reducer là dạng immutable object ( bất biến ) nên phải tạo 1 bản sao khác để so sánh.
Ví dụ : return {...state,name,age}

 const state = {
		user:{
		    name: 'huy'
		    cat : {
			childrenCat:'meo meo'  
            // shallow nó ko so sánh dc nếu dữ liệu phức tạp 
		    }
		}
	} 

Như ví dụ trên, nếu ta thay đổi user.cat.childrenCat = 'hi hi' dùng shallow nó sẽ ko check dc sự khác nhau giữa 2 object sẽ tạo ra lỗi ko mong muốn trong ứng dụng. (Dùng thư viện immer)
c) Nếu 1 function thay đổi chính object dc truyền vào cho nó, redux sẽ ko nhận ra sự thay đổi này vì tham chiếu vẫn trỏ đến địa chỉ vùng nhớ thôi.
Ví dụ

const state = {
    usser : {
        name : "John",
        age : 30 
    }
}

function updateUser(state){
    state.user.name = "Alice"
}

- Khi thay đổi bằng cách truy cập trực tiếp vào thuộc tính name của nó, Redux ko nhận ra sự thay đổi này vì nó chỉ ktra sự thay đổi đến địa chỉ vùng nhớ của object user. Nếu ta tạo ra 1 bản sao mới của object user trc khi thay đổi nó sẽ nhận ra sự thay đổi này.

function updateUsers(state){
    state = {
        ...state,
        user:{
            ...state.user,
            name: "Alice"
        }
    }
}

const obj = {
    name : "John",
    age : 30
}

const obj1 = obj2;
const obj2 = {
    name : "John",
    age : 30
}

console.log(obj1===obj) // true
console.log(obj2===obj) // false 

d) Ngược lại với nó là "deep equality" nó so sánh dc sâu bên trong của cả 2 object (đệ qui)
e) Shallow equality checking đơn giản và nhanh hơn deep equality => redux dùng shallow để cải thiện performance.
=> Dùng thư viện immer hoặc redux toolkit ( nó dc tích hợp sẵn thư viện immer ) để giải quyết vấn đề này.

## 18. Công dụng của middleware :
https://gist.github.com/nmvuong92/7171461e3bc33fddcfa3d5e2fd986c10
- Là lớp nằm giữa reducer và views.
- Là 1 khái niệm quan trọng trong Redux. Nó là 1 cơ chế cho phép ta can thiệp và xử lý các actions trc khi và sau khi chúng đến reducer.

- Công dụng :
+ Để tạo các hiệu ứng phụ side effect như loading, các tác vụ bất đồng bộ kiểm tra điều kiện trc hoặc sau khi dispatch action đến reducer
+ Thực hiện chức năng định tuyến, ở router 5 thường dùng history để chuyển hướng trang, hoặc dùng thư viện react-router-redux ở router 6 hoặc truyền navigate từ tham số.
+ Thực hiện chức năng tương tác với API : middleware như redux-thunk hay redux-saga cho phép thực hiện các chức năng tương tác vs API bên ngoài, gửi yêu cầu HTTP, xử lí yêu cầu trả về và cập nhật state ứng dụng. Handle Error.

## 19. componentWillUnmount chạy trước hay sau khi component bị hủy ?
Chạy trước khi component bị hủy
## 20. PureComponent và memo (React.memo) dùng để làm gì ?
- Tránh việc re render ko cần thiết , chỉ render lại khi props thay đổi.

import React from 'react';
const Counter = React.memo(({count})=>{
    console.log('render counting');
    return <div>{count}</div>
})
export default Counter;

## 21. HOC là gì ? Thường trong dự án em sử dụng khi nào ?
- React.memo là HOC
- High order component là 1 pattern trong React, cho phéo tạo component mới = cách bọc wrap 1 component khác. Nhận vào 1 component trả về 1 component khác.
- Khi cần wrap các screen trong 1 layout chung như Header, Footer, SideBar, Drawer,...

## 22. Em đã sử dụng context API bao giờ chưa ? context API truyền dữ liệu ntn ? có thể truyền giữa các component anh em dc ko ?
- Context là 1 tính năng trong react giúp truyền dữ liệu từ component cha sang component con mà ko cần truyền props. Như tk redux đều có nhiệm vụ quản lí state trong ứng dụng. Context dùng trong dự án quy mô nhỏ còn redux cho quy mô lớn.
- Context API là 1 API của React giúp quản lí context đó. Cho phép tạo 1 context

import React, {createContext, useState} from 'react';

const ThemeContext = useContext('light')
function App(){
    const [theme,setTheme] = useState('light')
    // cập nhật giá trị context
    const handleClick = () =>{
        setTheme(theme==="light" ? "dark":"light")
    }
}

## 23. Cho 1 code react tìm lỗi sai.

## 24. Hook là j ? Các luật khi dùng hooks :
- Hook là 1 tính năng của React cho phép sử dụng state, lifecycle,context,... như classComponent. => Tái sử dụng, dễ đọc, dễ kiểm tra.
- Luật khi dùng hook :
1. Hook chỉ có thể sử dụng trong FCC hoặc custom hook.
2. Tên của các hook phải bắt đầu bắt tiền tố (prefix) use.
3. Hook phải đặt ở top level, ko dc sử dụng bên trong function hoặc if else for while do.

## 25. Một số cách để tối ưu ứng dụng trong ReactJS
a. FCC : useCallback, useMemo, React.memo
b. ClassComponent : PureComponent, shouldComponentUpdate()
c. Sử dụng React.lazy và suspense để tải các component theo yêu cầu thay vì tải hết toàn bộ.
d. Tối ưu hóa ảnh
e. npm run build => build production hoặc dùng babel để đóng gói file JS

## 26. Phương thức map hoạt động ra sao ?

## 27. Cấu trúc của redux ?
- Redux gồm 3 phần chính (phần thứ 4 là khi dùng thunk-saga)
+ Action là 1 object bao gồm type để mô tả hành động của ứng dụng và payload dữ liệu.
+ Reducer là nơi tiếp nhận action và thay đổi state.
- Root reducer : quản lí tất cả reducer con
- child reducer : state là 1 object gồm nhiều thuộc tính
+ Store nơi lưu trữ và quản lí state. Mỗi ứng dụng chỉ có 1 store duy nhất. Store là 1 object bao gồm state của ứng dụng, reducer và middleware.
+ Middleware : là 1 phần mở rộng của Redux cho phép thực hiện các hoạt động xử lý trung gian trước khi action dc chuyển đến reducer. Xử lí các tác vụ bất đồng bộ. (thunk-saga)

## 28. Khi sử dụng các hook như useEffect, useCallback, ta hay truyền 2 tham số, callback function và 1 mảng dependencies, sự khác biệt giữa truyền mảng rỗng và ko truyền là gì ?
- Truyền mảng rỗng tương ứng với việc hook chỉ chạy 1 lần và kbh chạy lại trong suốt vòng đời của component.

## 29. Cho lần lượt các api 12345 => Muốn API 1234 cùng thực thi và thực thi xong thì API 5 mới được gọi thì dùng j ?

var p1 = new Promise((resolve,reject)=>{
    setTimeout(resolve,1000,'one')
})
var p2 = new Promise((resolve,reject)=>{
    setTimeout(resolve,2000,'two')
})
var p3 = new Promise((resolve,reject)=>{
    setTimeout(resolve,3000,'three')
})
var p4 = new Promise((resolve,reject)=>{
    setTimeout(resolve,4000,'four')
})

Promise.all([p1,p2,p3,p4]).then(values=>{
    // run api5
})

## 30. Vì sao ko nên lạm dụng useMemo() :
- Khi dùng sẽ tốn thêm dung lượng trong bộ nhớ để lưu trữ kết quả của

## 31 Xử lý form
- code tay dùng useState
- formik, react hook form yup và zod

## 32. Axios interceptor là j
- Là 1 chức năng dc cung cấp bởi Axios can thiệp vào các yêu cầu và phản hồi trc khi chúng dc gửi hoặc nhận. Interceptor cho phép bạn thực hiện các thao tác như thêm tiêu đề, định dạng dữ liệu trong mục headers.
- Ví dụ như t gắn cái accessToken moi từ dưới localStorage lên gắn vô.

import axios from 'axios';

const instance = axios.create({
    baseURL : "http://example.com"
})

instance.interceptors.request.use(config=>{
    const token = locaStorage.getItem('token')
    if(token){
        config.header.Authorization = `Bear ${token}`
    }
    return config;
},(err)=>{}
)

instance.get('tags').then().catch() hoặc async await

## 33. PureComponent và memo sử dụng kiểu so sánh nào ? Shallow hay Deep ?
- Shallow comparison để kiểm tra props có thay đổi hay ko

## 34. Ưu và nhước điểm của SPA so với MPA :
- Ưu điểm :
1. SPA ko cần phải reload lại trang nhiều lần
2. Tăng trải nghiệm người dùng
3. Giảm băng thông, giảm tải cho server => đỡ tốn tiền server
4. Chia 2 team FE , BE tách biệt, dễ quản lí code
- Nhược điểm :
- Giảm SEO
- Phụ thuộc code Javascript

## 35. Khi nào dùng useMemo ?
- Khi truyền tham số đầu vào và chúng trả ra kết quả giống nhau
- Function trả về tốn thời gian để tính toán thì nên sử dụng useMemo()

## 36. Sự khác nhau giữa file JS và JSX :
- File JS : là file mã nguồn JS chuẩn, ko có cú pháp đặc biệt.
- File JSX : là 1 phần mở rộng của Javascript, cho phép viết HTML trong file JS

## 37. hook nào để DOM đến element ?
- useRef

## 38. Khi nào dùng Class và Function component
- Xài phiên bản cũ trước 16.8 và xử lý state, logic phức tạp thì xài class

## 39. window và document khác nhau ntn ?
- window là đối tượng đại diện cho cửa sổ trình duyệt chứa tất cả các đối tượng về cửa sổ trình duyệt, bao gồm kích thước tọa độ, địa chỉ URL, các biến toàn cục,...
- window cg chứa các đối tượng khác như history, localStorage, session,location, document ( hay window là đối tượng cha của document)
- document đại diện cho toàn bộ tài liệu HTML được tải vào trình duyệt. Nó chứa tất cả các phần tử DOM của trang bao gồm HTML,CSS,JS và form,hình ảnh,...

## 40. class và object khác nhau ?
- class là 1 khuôn mẫu để định nghĩa các attribute (thuộc tính) và method (phương thức) của 1 đối tượng cụ thể.
- object (đối tượng) là 1 thể hiện instance cụ thể của 1 class. Nó có các thuộc tính và phương thức của class đó.

## 41. Tại sao người ta dùng React:
- Khả năng tái sử dụng component
- Hiệu suất tối ưu nhờ DOM ảo, phần tử nào thay đổi, React sẽ chỉ cập nhật các phẩn tử DOM cần thiết, giúp tối ưu render tăng tốc độ tải trang.
- Xây dựng SPA hay MPA đều dc.

## 42. Khi chưa có class, JS dùng j để tạo 1 đối tượng ?
- Trước ES6 (ECMAScript 2015) ko có khái niệm class. Để tạo 1 object dùng
+ Hàm khởi tạo constructor

## 43. React fiber là j ?
a) Là 1 phiên bản mới của React, dc giới thiệu từ bản 16. trở đi sử dụng thuật toán "fiber-based" còn trước đó sử dụng thuật toán "stacked-based"
b) Là 1 cơ chế thực hiện việc render và recociliation (so sánh) các component.
c) Trong phiên bản React trc đó, quá trình render của React là đồng bộ, nên nó sẽ ko cho phép ứng dụng xử lí các tác vụ khác trong quá trình render. Điều này gây ra vấn đề về hiệu suất, đặc biệt khi ứng dụng có nhiều component cần dc render.
d) React fiber dc thiết kế để giải quyết vấn đề này bằng cách chuyển sang mô hình render bất đồng bộ (asynchronous).
e) Nó chia quá trình render của React thành các bước nhỏ, mỗi bước chỉ thực hiện 1 số công việc nhất định. Khi 1 bước kế thúc React có thể tạm dừng và cho phép các tác vụ khác xử lí trc khi tiếp tục render.
f) React fiber cũng hỗ trợ các tính năng time splicing (chia thời gian) và preemption (ngắt).

## 44. React hook hoạt động như thế nào ?
- Khi hook dc gọi, React sẽ thực hiện các bước sau:
a. React lưu trữ state của component trong 1 biến đặc biệt, dc gọi là hook
b. Nếu state thay đổi, React sẽ gọi lại function component và truyền vào giá trị mới của state.
c. Function component sử dụng giá trị mới của state để render giao diện

## 45. Các hook thường dùng :
a. useState, useEffect, useReducer, useContext
b. useCallback, useMemo, useRef, useSelector

## 46. Why re-rendering or changing website on the browser is costly ? How the browser behave when he has a change to the DOM what is the flow ?
- Khi website re render, điều này tốn kém vì quá trình này đòi hỏi nhiều tài nguyên tính toán và băng thông mạng.
- Khi có sự thay đổi đến DOM trình duyệt sẽ chạy các bước sau :
+ Phân tích HTML, CSS
+ Tạo cây DOM cho HTML, CSSOM cho CSS
+ Render giao diện : tính toán vị trí kích thước từng phẩn tử trên trang web rồi vẽ ra.
=> DOM thay đổi nó phải chạy lại quy trình trên tốn kém tài nguyên và thời gian. Tối ưu dùng React giảm thiểu số lần render.

## 47. What is immutable data? Why react state have to be immutable (ko thể thay đổi)?
a. Immutable data là dữ liệu k thể thay đổi sau khi dc tạo ra.
b. khi 1 state thay đổi react sẽ so sánh giá trị mới và giá trị cũ để xác định xem có cần render lại ko. Nếu giá trị mới khác với giá trị cũ React sẽ thực hiện re render.
c. state của react là mutable (có thể thay đổi) thì khi ta thay đổi trực tiếp giá trị của state, react sẽ ko biết dc state đã thay đổi hay ko, cần render lại hay ko
d. React phải sử dụng immutable data cho state, tức là khi thay đổi giá trị state, chúng ta sẽ tạo ra 1 bản sao mới (spread operator). Để react so sánh và xác định dc sự thay đổi từ đó nó biết có cần render lại hay ko. Và nó chỉ cập nhật chỗ thay đổi trên giao diện. Tăng hiệu suất, giảm thiểu tốn tài nguyên.

## 48. Em hiểu gì về React ?
## 49. Phân biệt props và state
## 50. Kể tên những loại Hook mà em biết? Và những hook đó làm gì?
## 51. Biết sử dụng Redux không? Cách hoạt động của Redux với Redux Toolkit
## 52. Một component bị re-render nhiều lần và tính toán logic nặng thì có cách nào tối ưu không?
Câu hỏi này thì mình trả lời là sử dụng useMemo, useCallback và anh có hỏi thêm là sự khác nhau giữa useMemo với React.memo