React 按下編輯按鈕後，想要自動 focus 在內容上

寫 todolist 想要在按下編輯鍵時，自動 focus 在更改內容上，可以直接修改。不必再去點。
目前用 useEffect 解決。但在效能上應該有可以優化的地方。

  useEffect(() => {
    if (document.querySelector("#editedInput"))
      document.querySelector("#editedInput").focus();
  }, editedId);
  // 這寫法有問題

editedId 是我按下編輯按鈕時，會將那個 todo 的 id 存在裡面。這樣才知道渲染時是哪個 todo 要變成可以輸入的狀態。放在這個地方，代表每次 editedId 變動時，都會執行這個 useEffect 。
剛剛嘗試了一下 editedId 放在那邊會噴錯，我以為放在那邊意思是每次 editedId 改變時再進行 useEffect 。但結果不是，每次畫面改變都會執行到，還在研究怎麼只在特定情況下才執行 useEffect。所以目前程式碼是這樣：

   useEffect(() => {
    console.log("efffect!")
    if (document.querySelector("#editedInput"))
      document.querySelector("#editedInput").focus();
  });

就算沒有點擊編輯按鈕，useEffect 也會執行。最好的狀況是，只有我點擊編輯按鈕時，才要執行這個動作。

8/25 更新： 其實第一段程式碼沒寫錯，會噴錯的原因是第二個參數要傳入 array。

  useEffect(() => {
    if (document.querySelector("#editedInput"))
      document.querySelector("#editedInput").focus();
  }, [editedId]);

這樣就可以達到預期中的效果，在 editedId 改變時才會去執行這個 useEffect。意外的簡單啊～