const [count, setCount] = useState(0);
const [name, setName] = useState("");
const [items, setItems] = useState<string[]>([]);
 
// Atualizar
setCount(count + 1);
setCount((prev) => prev + 1); // Melhor para updates baseados no estado anterior
setItems((prev) => [...prev, "novo item"]);

// Roda quando o componente monta
useEffect(() => {
  fetchData();
}, []);
 
// Roda quando uma dependência muda
useEffect(() => {
  fetchUser(userId);
}, [userId]);
 
// Cleanup (quando o componente desmonta)
useEffect(() => {
  const interval = setInterval(() => tick(), 1000);
  return () => clearInterval(interval);
}, []);

// Referenciar elemento DOM
const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();
 
// Valor que persiste entre renders sem causar re-render
const renderCount = useRef(0);
renderCount.current++;

const filteredItems = useMemo(() => {
  return items.filter((item) => item.name.includes(search));
}, [items, search]);

const handleClick = useCallback(
  (id: string) => {
    deleteItem(id);
  },
  [deleteItem],
);

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === "undefined") return initialValue;
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });
 
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
 
  return [value, setValue] as const;
}
 
// Uso
const [theme, setTheme] = useLocalStorage("theme", "dark");

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);
 
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
 
  return debounced;
}
 
// Uso
const debouncedSearch = useDebounce(search, 300);