YouTip

useState Hook

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
        </div>
    );
}

useEffect Hook

import { useState, useEffect } from "react";

function DataFetcher() {
    const [data, setData] = useState(null);
    useEffect(() => {
        fetch("/api/data")
            .then(r => r.json())
            .then(setData);
    }, []); // run once
    return <div>{data ? JSON.stringify(data) : "Loading..."}</div>;
}

Summary

• useState manages component state
• useEffect handles side effects