之前在 react hook 系列中提過，當要在 component 之間取用共同（相同）的方法或邏輯時時，可以使用 custom hook
快速回憶一下，所謂 customHook ，就是應用 js 的 export/import 方法，撰寫以 use 為開頭 的function，其內容可能會呼叫其他 react hook，使用時則在不同 component 中 import，如同 react hook 中要使用 react hook 所做的動作

基本上 customHook 跟一般 function 沒有太多差別，不過跟使用 react hook 一樣，只能在 top level 呼叫 react hook，執行到結束前 return value，另外 custom hook 用於分享邏輯，而非分享 state

用 custom hook 把 wordle 的邏輯獨立出來

基於要在多個組件中共用邏輯，因此來訂一個 useWordle ，內容包含幾個邏輯

1. 添加每一筆新的回答
2. 比對本次玩家的回答與真實答案之間的差距
3. 將每次的答案格式化為每個字符物件
4. 鍵盤的輸入事件

import { useState } from 'react';
const useWordle = (solution) => {
  const [turn, setTurn] = useState(0);
  const [currentGuess, setGuess] = useState([]);
  const [guessHistory, setGuessHistory] = useState([]);
  const [isCorrect, setIsCorrect] = useState(false);

  // 每次的答案格式化為每個字符物件
  const formatGuess = () => {};

  // 添加每一筆新的回答
  // 檢查回答與真實答案之間的差距
  const addNewGuess = () => {};

  // 鍵盤的輸入事件
  const handleKeyup = () => {};

  return currentGuess, guessHistory, turn, isCorrect, handleKeyup;
};

export default useWordle;

參考資料

https://reactjs.org/docs/hooks-custom.html