[譯] useEffect 有時候會在瀏覽器繪製（Paint）之前觸發
useEffect 應該在瀏覽器渲染（ paint() ）之後執行，以防止阻塞更新。但您知道它並沒有保證一定在渲染之後觸發？在 useLayoutEffect 中更新狀態（state）會導致同一次渲染中的 useEffect 在渲染之前執行，這是為了有效率的處理佈局的效果。感到困惑嗎？
useEffect 應該在瀏覽器渲染（ paint() ）之後執行，以防止阻塞更新。但您知道它並沒有保證一定在渲染之後觸發？在 useLayoutEffect 中更新狀態（state）會導致同一次渲染中的 useEffect 在渲染之前執行，這是為了有效率的處理佈局的效果。感到困惑嗎？
React 18 alpha 已經釋出，穩定版可能幾個月後就會跟進。是時候聊聊加入的新功能了。如果您本來就不知道 React 那您可以略過這篇文章。
介紹新功能之前，我們先來看一些您有可能不熟的概念，例如 SSR，Suspense 還有 Hydration。如果您已經知道這些，您可以直接跳到 React 18 的變更一章。
伺服器端渲染 SSR 主要和改善使用者體驗和 SEO 有關，並不是針對改善應用程式的效能。當客戶端對一般 React 應用程式請求頁面時，伺服器會回應一些檔案。這種情境下有兩個很重要的檔案：第一個是一個幾乎為空的 HTML，第二個就是 bundle.js。應用程式依據路由在這個空的 HTML 中利用 JS 動態產生內容。這種模式叫做客戶端渲染，因為主要是由客戶端動態渲染。使用者最一開始會看到空白的頁面，接著當 bundle.js 下載完畢會動態渲染。
在為我們的專案（React）進行程式碼審查的時候，我常發現開發成員沒有意識到關於 useState 提供的一些好用功能或討厭的陷阱。雖然這些觀念不是什麼重大的啟發，但每一個使用 Hook 的人都應該要了解。
[toc]
React DnD 是 React 一系列的單元功能，用來協助您建置介面上複雜的拖拉功能同時維持元件解耦。特別適合像是 Trello 類型的應用程式利用拖拉來轉移資料，並依據拖拉事件變更的狀態改變元件的外觀。
1 | $ npm i react-dnd react-dnd-html5-backend |
Sanctum 是一套輕量化的 API 認證機制套件。本文會介紹如何使用 Sanctum 支援 React 單頁應用程式認證（會員登入）。我們假設應用程式的前端和後端使用相同 TLD 頂級網域下的子網域，如此才可以使用 Sanctum 基於 Cookie 的驗證流程。利用這種作法可以省去處理 API Token 。為此我們使用 Homestead 設定兩個網域 api.sanctum.test 指向 Laravel 專案的 public 目錄用於提供後端，sanctum.test 指向另一個目錄提供前端的部分。
本文主旨於介紹 React 渲染的行為，包含使用 Context 和 React-Redux 之後的渲染行為。
我已經見了太多關於渲染的問題並且這些問題仍然持續出現 - 什麼時候，為什麼 React 會重新渲染元件，如果使用了 Context 或 React-Redux 會如何影響重新渲染的範圍和觸發的時機。經歷了多次的解釋，似乎有這個必要將這些回答彙整成一個較完整的介紹。
注意：這些資訊網路上都已經有了，而且很多人都解釋過了，但人們似乎還是蠻困擾因為資訊散落而不容易有個比較完整的了解，所以這篇文章試著將這些問題整理說明清楚，希望能對您有些幫助。
本文嘗試盡可能實作最佳實踐，但部分設定請依據自身需求調整。
本筆記為閱讀 How to Replace Redux with React Hooks and the Context API 後自行實作調整簡化之範例。對於希望直接從範例學習的讀者可自行練習，本範例並非非常完整的教學，不過在能帶給您在使用 Hook 和 Context 上一些啟發：
本文旨在提供一些關於 Hooks API 一些乍看之下奇怪的規範以及理解這些規範的見解。
我們都知道元件是由上而下傳遞資料，藉此協助我們分解一個複雜的大型介面，利用較小單位的介面功能（元件）組成。這些元件各自是獨立的，可重複使用的。雖然理想上是如此，可是實務上我們卻常常無法拆解複雜的元件，使其變成更小的單元，那是因為其相關的邏輯和狀態無法被提取到其他 function 或元件中。