Recoil 定義了一個與我們 <App> 元件樹 ( React Tree ) 正交 ( orthogonal ) 有向圖 ( directed graph )，且附著在元件樹上。

Recoil defines a directed graph orthogonal to but also intrinsic and attached to your React tree.

正交是來自數學向量的名詞，但在這邊提供一些關於程式設計與正交的解釋。

「正交性」，意味著更高的內聚，更低的耦合。為此，正交性可以用於衡量系統的可重用性。...
正交設計 segmentfault

程式語言上的正交
用於表示指相互獨立，相互間不可替代，並且可以組合起來實現其他功能。...
正交概念 知乎

元件樹

正交

Recoil 具體的實作如下：

1. 一個不用透過模板建立( boilerplate-free )的 API，全域共享 state 存取的方法跟 React API 一樣。 ( 如果有需要也可以把 state 封裝成 reducer )。 註解： boilerplate 像是我們可以透過 Create React App 的 Cli，快速幫我們建立專案基本設置。
2. 擁有能與 Concurrent Mode 及 其他新的 React feature 相容的可能性。
3. 共享狀態( state ) 的定義是可以逐步遞增且分散、分佈的，因此可以實現代碼拆分 ( code-splitting )。 註解： 可參考上面的圖片，狀態可以用最小單位逐步新增上去。
4. 不用修改現有使用到這些state的元件，就可以透過導出資料( derived data ) 取代state。 註解：Derived data is data that can be computed from other base data. Be Careful with Derived Data
5. 不用修改現有使用到這些state的元件，導出資料( derived data ) 可以在同步 / 非同步中切換。
6. 我們視導航( navigation )為一等公民( first-class concept )，甚至將 狀態轉移 用 鏈接 的方式，編碼起來。
7. 可以用向後兼容( backwards-compatible )的方式，輕易的儲存整個 App 的狀態。所以當 App 改變時，這些狀態可以被保留下來( persisted states )。

Recoil 與 導出資料( derived data )

// 有個 To Do List 的狀態
const [todoList, setTodoList] = useRecoilState(todoListState);
// 導出資料( derived data ) ，透過 To Do List 導出的 Filter 狀態
const [filter, setFilter] = useRecoilState(todoListFilterState);
...
// 透過 Recoil API 包裝以下 fiter 實作：
   switch (filter) {
      case 'Show Completed':
        return todoList.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return todoList.filter((item) => !item.isComplete);
      default:
        return todoList;
   }