React報錯之Rendered more hooks than during the previous render

正文從這開始~

總覽

當我們有條件地呼叫一個勾點或在所有勾點執行之前提前返回時，會產生"Rendered more hooks than during the previous render"錯誤。為了解決該錯誤，將所有的勾點移到函陣列件的頂層，以及不要在條件中使用勾點。

這裡有個範例用來展示錯誤是如何發生的。

// App.js

import {useEffect, useState} from 'react';

export default function App() {
  const [counter, setCounter] = useState(0);

  // ⛔️ Error: Rendered more hooks than during the previous render.
  if (counter > 0) {
    //