Redux-form vs formik vs react-hook-form

React 最流行的三個 form 庫

• redux-form, formik 和 react-hook-form

Package size

• redux-form 26.4k
• formik 15k
• react-hook-form 8.7k

第三方表單驗證

• redux-form 不支持，需手動驗證
• formik 支持，可以使用 Yup schema 驗證
• react-hook-form 支持多種第三方驗證，像 Yup, Joi, Superstruct

性能

測試發現:

• redux-form 性能優異，雖然大家都不喜歡它
• formik 的 Field 組件在大型的 form 表單中會出現性能問題，可以使用 FastField 組件改善
• react-hook-form 在非受控組件中表現最好但是不會觸發 re-render, 但是如果觸發了 re-render 性能比不上 redux-form 和 formik

Npm 下載量

如何遷移

使用 redux-form 的時候，form values 都是存儲下 redux中， 你可以在任何一個地方拿到它，但是遷移到 formik 或者 react-hook-form, 該如何在 form 外層拿到 values 呢？

• 方案一：提升狀態，假設有 B，C 兩個組件，B 組件裝的是 Form Field, C 組件是負責 submit 的 button, 那么需要在 B, C 組件外面包裹一個 A 組件， 讓 A 組件處理 B 組件的表單更新， 然后將 values 傳到給 C 組件。 缺點是如果表單比較重，組件 A 需要處理大量邏輯， 而此工作本應該是由 B 來做。
• 方案二：使用 ref
  我更傾向於方案一。

結論

從趨勢圖中可以看到目前 formik 應用最廣， react-hook-form 上升很快，redux-form 不建議上車。

	優點	缺點
formik	支持 class component 可以注冊非 input 的 field 當用戶輸入時驗證所有字段	大型表單中性能不好 hooks API 有很多限制 github 存在很多 issues
react-hook-form	API 基於 hooks, code 體驗很好 性能比較優異 issues相對少	不支持沒有相應 input 的 field 只支持驗證正在編輯的field API 更新比較頻繁

或許當前 formik 才是最好的選擇，當然如果你想嘗鮮不妨試試 react-hook-form

以上翻譯自同事分享並編輯