這篇文章列出了 9 項 React 開發者常犯的錯誤，並且提供了解決方法。我從當中擷取了 6 項，其中包括了 (1) 使用 0 作為 JSX 的判斷條件，(2) 直接修改 state，(3) 沒有給 list 的每一個 item 加上 key，(4) 在 setState 後，使用舊的 state 值，(5) 將 input 的 value 初始化為 undefined，(6) 誤將 async promise 當作 useEffect 的 return function。
在 React 中使用 components map 可以更精簡地使用條件式渲染元件。我們可以使用普通的 JavaScript 物件或 Map 創建 components map，以及使用 lazy-loading 使元件動態載入。另外，在切換元件時使用 startTransition 可以避免元件切換閃爍的問題。最後，使用 components map 有一個缺點，就是 map 中的所有元件必須使用相同的 props。
在 React 中，我們無法將整個 useEffect 或子元素裝在 try/catch 來捕獲錯誤，但我們可以使用 ErrorBoundary 來實現這一點。需要注意的是，ErrorBoundary 也有一些限制，例如無法捕獲非同步錯誤或事件處理中的錯誤。但我們可以在 catch 區塊中強制將 React 重新渲染，然後把錯誤丟回重新渲染的生命週期來解決這個問題。
本文介紹了如何使用 Function Composition 來將 React 專案中的 cross-cutting concerns 組合成一個 HOC，並且使用 currying 來解決 HOC 需要有條件的渲染的問題。作者提出的解決方案是將這些重複的區塊 cross-cutting concerns 透過 function composition 把多個 HOC 組合成一個大的 HOC，然後在專案中使用它，以減少重複的工作。
這篇文章深入探討了 useState 的同步特性以及錯誤使用方式。特別是在使用 setter 和 getter 同時的情況下，容易出現的錯誤，我們將透過具體的範例，幫助理解錯誤的原因和解決方案。
在 React 的狀態管理中，有一個黃金規則，就是盡可能地將狀態保持在元件本身。這意味著你應該只在需要它的元件中宣告狀態，而不是每次都將狀態宣告在最上層的元件中。在最上層宣告狀態，可能會導致不必要的複雜性，使你的程式碼難以維護。
React 專案的結構可以分成三個等級：初級、中級和高級，而每個等級的結構對於不同大小的專案都有不同的適用情況。在初級結構中，所有重要的元件、頁面、版面都會放在 `components/` 資料夾中。而較大型的專案則可以使用中級或高級結構，將檔案分類更清晰。如果你正在開發 React 專案，可以參考這些結構來更有效率地組織你的檔案。
這篇文章介紹了 mutation、immutable 的概念，以及 React 為什麼要用 immutable 的資料結構。簡而言之，React 的 setState 會用 Object.is() (一種類似 === 的**淺層比較**) 來判斷 state 是否有變化，並決定是否要重新渲染。所以，如果只是修改 state 的內容，而沒有改變它的參考位置，React 就不會重新渲染。這意味著，我們不能直接改變 state 來觸發重新渲染，而是要用 setState 給它一個新的值。這就是 React 需要 immutable 的原因，因為我們要用複製和修改的方式來產生一個新的物件或陣列，讓 React 能夠發現 state 的變化。
我們可以透過 `IntersectionObserver` 來偵測元素是否在視窗中，並且透過 CSS transition 來實現滾動時的動畫效果。這個方法不需要任何第三方套件，而且可以製作成一個通用的動畫元件，讓開發者可以自行決定動畫的效果。
前端技術發展超級快速，每天都有新的技術出現，為了追隨時代的腳步，保持與時俱進，所以我喜歡訂閱一些電子報，搜尋有趣的技術文章，以及在 YouTube 上亂看一些技術影片。這樣我就能不斷學習，獲得最新的前端技術資訊，我也會將我所學到的知識分享給大家，希望大家也能從中學習到新的知識，並且一起深入探討，加深對前端技術的理解。
作者認為當設計元件時，如果過度考慮裡面的內容時，會導致幾個問題。例如太多僵硬的規則，導致無法容納新的設計、或是太過預先定義和結構化以至於無法支援輕微的變化。這些設計通常會導致技術債、更陡的學習曲線、以及維護程式碼的困難。為了避免這種情況，作者建議在元件設計時，應該要有一定程度的自私（selfishness）。元件應該要優先考慮自己的需求和目標，而不是過度考慮其他元件和自己的內容。例如在製作一個 button 時，應該要先考慮 button 的需求（行為、狀態），而不是考慮 button 的內容（樣式、文字、Icon 位置）。這樣的元件才能夠被輕易的重用、維護、擴充。
本篇文章介紹了在 React 中如何使用 URLSearchParams 儲存狀態，以及如何使用 React Router 提供的 useSearchParams 和 useLocation 來管理和分享狀態。還封裝了一個 useSearchParamsState，提供了類似 useState 的 API。
這篇文章主要介紹了如何使用 subpath imports 實現單獨導入元件的功能，單獨使用每個元件的時候，不需要再導入整個元件庫，優化元件庫的效能。關鍵在於透過 rollup-plugin-generate-package-json 等插件和函式，在設置 rollup.config.js 時為每個元件單獨生成 index.js、index.d.ts 和 package.json 檔案。
這篇文章介紹了 Orton Effect，一種攝影技術，並且使用 CSS 和 React 實現了這種效果。
本文將介紹 useImperativeHandle 這個 hook，它可以讓我們攔截父元件傳遞的 ref，並回傳一組新的方法給該 ref。這個 hook 通常會搭配 forwardRef 一起使用，讓我們在自定義元件中取得 DOM reference，並且可以在父元件中使用子元件的函式。
useSignal() 是一種類似於 React 中的 useState() 儲存應用程序狀態的方式。不同之處在於，useSignal() 返回一個 getter 和一個 setter，而 React 的 useState() 則返回一個 value 和一個 setter。這讓 Signal 可以透過訂閱者模式來追蹤誰在使用 state，並在 state 更新時通知訂閱者，減少不必要的 re-render。