先弄懂這三個 React Hook

React Hook 多，但很多需求可以先用三個基本工具表達。

useState 存目前畫面的值

const [keyword, setKeyword] = useState("");

輸入框、篩選條件、開關狀態，大多是同一種模式。資料改變後，去更新 state，畫面自然跟著更新。

useEffect 處理副作用

useEffect(() => {
  document.title = keyword || "首頁";
}, [keyword]);

副作用包含資料抓取、事件綁定、外部系統同步。第二個陣列要寫清楚依賴，才能在正確時間重新執行。

useRef 留住不需要重新渲染的值

const inputRef = useRef(null);

常用來拿 DOM 元素、記前一次狀態，或保留計時器。它很方便，但不適合當作所有共享狀態的替代品。

把元件邏輯先寫小、界線清楚，之後要再抽成 useReducer 或另外一支 custom hook 都會比較自然。