React Hooks

setState

import React, { useState } from "react";
import "./styles.css";

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

  function handlePlus() {
    return setCounter(counter + 1);
  }

  function handleMinus() {
    return setCounter(counter - 1);
  }
  return (
    <>
      <div className="App">{counter}</div>
      <button onClick={handlePlus}> + </button>
      <button onClick={handleMinus}> - </button>
    </>
  );
}

useEffect

import React, { useState, useEffect } from "react";
import "./styles.css";

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

  useEffect(() => {
    console.log("first render");
  }, []);

  useEffect(() => {
    console.log(counter);
  }, [counter]);

  useEffect(() => {
    console.log(name);
  }, [name]);

  function handleAdd() {
    setCounter(prevState => prevState + 1);
  }

  function handleMinus() {
    setCounter(prevState => prevState - 1);
  }
  return (
    <div>
      <div className="App">{counter}</div>
      <button onClick={handleAdd}> + </button>
      <button onClick={handleMinus}> - </button>
      <br />
      <span>{name}</span>
      <input onChange={e => setName(e.target.value)} />
    </div>
  );
}