<style>
.description{
letter-spacing : 2px;
line-height : 28px;
text-align : justify;
}

.firstLine{
margin-left : 30px;
}

b{
font-weight : 700;
}
</style>

# React useState

[影片](https://youtu.be/1Pks5cmfr4A)

<div class="description">
<b>useState</b> 是用來改變React State的方法，一旦State被改變，React會幫助我們重新渲染網頁畫面，先看不用useState的範例。
</div>

function App() {
  let counter = 0;
  const counterHandler = () => {
    counter += 1;
    console.log(counter); // every click : 1, 2, ... n
  };

  return (
    <>
      <p>{counter}</p>
      <button onClick={counterHandler}>Click</button>
    </>
  );
}

export default App;

<div class="description">
以上程式碼只要我們點擊按鈕觸發<b>counterHandler</b>後，我們可以在console看到counter的數值變成1了，每點擊一次counter值就會+1，但奇怪的是我們在畫面上的counter值依舊是<b>0</b>，這是因為React<b>不知道畫面已經被改變了，這就是為什麼我們需要透過useState來告訴React我們的畫面有改變，必須重新渲染畫面。</b>
</div>

***
<div class="description">
接著讓我們看使用useState的範例
</div>

import { useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const counterHandler = () => {
    setCounter((counter) => counter + 1);
  };

  return (
    <>
      {counter} //every rerender : 1, 2, n ...
      <button onClick={counterHandler}>Click</button>
    </>
  );
}

export default App;

<div class="description">
useState會給我們兩個值，一個是變數的初始值，由程式碼第4行來看counter的值為0，第二個是改變這個值的方法，我們會透過這個方法去更動counter的值，一旦該方法被呼叫，React就會重新渲染我們網頁的畫面。
</div>