useStateで配列を更新する際に少しでも記述量を減らす（学習記録アプリ）

初めに

今回簡単な学習記録アプリを開発して、その流れの中でコードの量を減らす記述方法を学んだので共有します！

修正前の記述

const [inputText, setInputText] = useState("");
const [inputTime, setInputTime] = useState("");
const [records, setRecords] = useState([]);
const [error, setError] = useState("");

//ボタンをクリックした時の動作
const onClickAdd = () => {
    const newRecord = {
      title: inputText, //フォームに記入した学習内容
      time: inputTime, //フォームに記入した学習時間
    };

    // 学習内容と学習時間がどちらも記入されていれば処理を回す
    if (inputText !== "" && inputTime !== "") {
      const recordsArray = [...records, newRecord];
      setRecords(recordsArray);
      setInputText(""); //ボタンをクリックしたらフォーム内に記入した学習内容を初期化
      setInputTime(""); //ボタンをクリックしたらフォーム内に記入した学習時間を初期化
      setError(""); // 学習内容と学習時間がどちらも記入されていれば注意文は表示しない
      
    // 学習内容と学習時間がどちらかが記入されていなければ注意文を表示
    } else {
      setError("入力されていない項目があります");
    }
};

この記述な中で省略できる箇所があります。

修正後

const [inputText, setInputText] = useState("");
const [inputTime, setInputTime] = useState("");
const [records, setRecords] = useState([]);
const [error, setError] = useState("");

//ボタンをクリックした時の動作
const onClickAdd = () => {
    const newRecord = {
      title: inputText, //フォームに記入した学習内容
      time: inputTime, //フォームに記入した学習時間
    };

    // 学習内容と学習時間がどちらも記入されていれば処理を回す
    if (inputText !== "" && inputTime !== "") {
      setRecords([...records, newRecord]); 
      setInputText(""); //ボタンをクリックしたらフォーム内に記入した学習内容を初期化
      setInputTime(""); //ボタンをクリックしたらフォーム内に記入した学習時間を初期化
      setError(""); // 学習内容と学習時間がどちらも記入されていれば注意文は表示しない
      
    // 学習内容と学習時間がどちらかが記入されていなければ注意文を表示
    } else {
      setError("入力されていない項目があります");
    }
};

答えは

const recordsArray = [...records, newRecord];
setRecords(recordsArray);
//上のコードを以下のように変更しました
setRecords([...records, newRecord]); 

終わりに

今回はたった1行の省略ですが記述量が増えてくれば、少しでもコードの可読性を上げるためにこういった省略記法も大切！
他にも省略できる箇所はあるかもしれないので、リファクタリング進めていきたいです！