鐵人賽剩下 5 天，接下來我想聚焦在一些經驗分享，畢竟除了學習技術以外，適時的採取一些實際行動更能夠快速吸收所學知識與進步。

身為軟體工程師， Github 自然而然會成為你的好朋友，不論是學校課堂的專案，或是工作上公司的產品，都會使用 Github 或類似的版控平台來管理專案，不過通常這些 project 都會是私人的（但是我的 side project 或是畢業專案都直接設 public，反正根本不會有人想看 ?），不會輕易讓所有人看到專案的程式碼（公司資產）。Github 另一個強大的地方就在於平台上存放著大量的 open source project，像是 React、Deno 等知名開源專案都可以在 github 上看到 source code，而開源的目的就是希望可以藉由社群的力量來維護或讓專案變得更好，人人都可以貢獻自己的一份力量。我希望未來的某一天，我也能夠成為寫出一些開源工具給社群開發者使用的工程師，因此除了平常多多研究 open source code，我也給自己定了一個畢業後半年內要完成的小小目標：第一次貢獻開源專案。

首先先推薦一篇文章

這篇文章說明了貢獻開源專案應有的心態與注意事項，而本篇文章主要是分享自己第一次貢獻的心路歷程，如何實踐並且驗證以上文章的內容。

第一步：決定要貢獻哪個專案 ＆ 要貢獻什麼

每個開源專案都有一個統整 issue 的地方，我們可以從這之中挑選自己想要做的票來做，很多人都說，第一次 contribute 可以是改錯字或是改變數名稱或是修改失效的連結等技術含量低的 task 來做，然而我希望自己第一次的貢獻可以解決一些實際的問題或有更實質的幫助。問題來了，要解決開源專案的 issue 有個很大的特點就是需要對該專案 source code 夠熟悉，不論是專案裡面使用的技術或是整個架構都要有一定的掌握度，然而以自己目前的實力，要充分理解專案架構實在是有點困難，於是我決定往 util 型的 project 去尋找，frontend 的話以 React 為例可能就是 custom hooks，後端的話則可以朝 middleware 的方向去思考。想了一下後我決定尋找蒐集 custom react hooks 的開源專案，因為自己剛好在工作開發上發現了這方面的需求，想辦法解決自己的需求，這動機再合理不過了吧！?

（如果不知道 React custom hooks 是什麼的讀者，可以想像成使用 React 提供的原生 hooks 去實作出符合自己特定需求或是有特定作用的可重用 hooks（可以想成一個特定功能的獨立 function）。）

首先來談談自己工作上遇到的需求（只會簡單帶過，因為不是本篇的重點），React 在 component 的 state 管理常使用 React.setState 這個原生 hooks，使用方法如下

const [state, setState] = useState(initialValue);

除了回傳 state 以外，還會回傳一個 state 的 setter function，需求上是往往需要在呼叫 setter function 以後拿新的 state 值做對應的處理，不過問題就是出在 setter 的執行是非同步的，所以沒辦法將要對應的操作直接寫在 setter function call 之後，如果要做到確保拿到最新的 state 值後做對應處理，得使用另一個 React 的原生 hooks useEffect，在 state 值更新後去呼叫

useEffect(() => {
  //...do some things
}, [state]);

我認為這樣的寫法有點沒那麼直覺，因此我希望可以寫出能讓 setter function 帶入 callback 的 custom hook，而 callback 可以接收到更新後的 state 值，類似於

const [state, setState] = useStateWithCallback(initialvalue);
setState(5, (val) => {
  console.log(val) //val為5
  // ...do something
});

思考了一下後我認為實作並不算太困難，運用 React 原生的 useRef, useEffect, useCallback 應該就可以達成。Google 了一下也發現有人有做過類似的需求，接下來就是要確認這個需求是否已在開源專案中被別的開發者搶先貢獻了。

蒐集 custom react hooks 的開源專案其實滿多的，我挑選了兩個開源專案，幸好確認過兩個專案的 README.md 、open issue、open pull request 後，發現這個需求似乎來沒被別人貢獻過。

第一個專案是 github 上擁有 1萬5千多顆星星的 react-use

第二個專案 beautiful-react-hooks 雖然只有 3500 多星星，卻有提供方便的 live playground 給開發者體驗。

最後我選擇了 react-use 作為目標貢獻的專案，因為不管是使用者人數、contributors 人數、甚至是蒐集的 hooks 數量都遠高於另一個專案，不過對我來說最重要的一點是它是使用 TypeScript 開發啊！（熟悉 TS 以後真的回不去了QQ）

今天說明了想貢獻開源專案的動機以及選擇專案的背景，明天將繼續分享開發與發佈時的經驗。