1. 版本與支援

Hooks 是 React 16.8 版本推出的語法，React Native 則是在 0.59 版本開始支援，讓你不用寫 class component 也可以使用 state 和其他 React 功能。

目前 Hooks 在 React DOM、React Native、React Test Renderer、React Shallow Renderer 都有穩定的支援。如果你要使用 Hooks，請記得所有的 React Packages 都要是 16.8.0 以上的版本（如果其中一個沒有更新，也是無法運作）。

2. 有哪些 use cases 是 Hook 缺少（而 classes 有）的？

以下的 lifecycles getSnapshotBeforeUpdate, getDerivedStateFromError 以及 componentDidCatch（這個的 use case 可以去看 error-boundaries 那一篇文章） ，目前在 Hook 中並沒有相對應的方法，但是有在更新計畫中。

3. Hooks 取代 render props 跟 HOC 的用法了嗎？

通常 render props 跟 HOC 只會 render 出單獨一個 child，Hooks 可以更簡單的實作出這種使用情境，在大多數的情境裡，Hooks 都可以幫助你降低 DOM tree nesting 的程度。

但這兩種模式還是有無法替代的情境，例如：一個 virtual scroller component 的實作可能會有 renderItem 作為 prop。（因為對 virtual scroller component 的情境不太清楚，所以我找了一個套件 https://www.npmjs.com/package/react-virtualscroll 當作案例來補充）

react-virtualscroll

這個模組適合用在實作 infinite scroll，當使用者滑動頁面的時候，使用同一個 DOM element 來展示內容，藉由固定 DOM elements 的數量來節省效能，僅顯示剛剛好能夠填滿 viewport 的一小部分的內容。以下是這個模組的用法：

<VirtualScroll
    items={this.state.items}
    onChange={(event) => this.setState(event)}
		// 這裡會傳入一個 renderItem 的 function
    renderItem={this.renderItem.bind(this)} />

// 這是傳入 <VirtualScroll> 的 renderItem function，用來 return 你希望資料被展現的樣子
renderItem(item) {
  return <div key={item.index} className="flx mb1 divider-b primary">
    <div className="fw1">{item.name}</div>
  </div>
}

ref
https://reactjs.org/docs/hooks-faq.html
https://stackoverflow.com/questions/55075604/react-hooks-useeffect-only-on-update