以下羅列一些寫React的好習慣：

Takeaway

• 使用Fragments（空標籤）取代無效的div，因其可讀性更高，渲染出的DOM也更小
• 不會循序改變的state可以使用memo，避免不必要的渲染。不過到React 19情況可能又會有變，因為脫胎自React Forget的React Compiler要來了
• 在JSX裡使用行內樣式（style={鍵值對}），會比用className外連CSS的效能好，但將沒那麼方便使用media queries和hover等功能。解方如：安裝外掛radium，請自行斟酌。感覺兩邊各有擁護者。另外還有Styled Components、Emotion和Glamorous這樣的CSS-in-JS庫可供參考，更是出現了CSS Modules這樣的模組化解決方案，以亂數解決命名衝突問題。而Next.JS則是採用Styled-JSX
• 使用強調屬性名稱的物件解構賦值，可讓提取資料更便利，擺脫點記法
• 不要在JSX裡寫JS
• 使用更易讀，還可以設定預設值的樣板字面值，取代「加號相連到天邊」的字串串接。這是寫JS時本來就可以保有的反射動作
• 保持有條理的引入順序：內置 → 外連 → 內連
• 不要拿會讓人誤會的名稱幫props命名。譬如style或type等可以直接操作DOM的HTML屬性
• 使用React.lazy動態載入組件，做到程式碼拆分以提升效能
• 可用PropTypes對props進行型別檢查

Reference

21 Best Practices for a Clean React Project