2b:["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":3}] 2c:["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Use generics quando o tipo varia — Um hook de fetch que busca User, Product ou Order precisa de generic, não de tipo fixo."}}]}] 2d:["$","div","3",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":4}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Retorne tuple quando fizer sentido — Padrão [valor, setter] como useState. Use 'as const' pra TypeScript inferir tupla e não array."}}]}]]}] 2e:["$","div","4",{"className":"flex items-center gap-4","children":[["$","div",null,{"className":"flex items-center justify-center w-8 h-8 bg-lime-500 text-black rounded-full font-semibold","children":5}],["$","div",null,{"className":"text-gray-300","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"Tipar callbacks internos — Funções que o hook expõe (reset, refetch, toggle) precisam de tipo explícito no retorno."}}]}]]}] 2f:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplo: hook simples com retorno tipado"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"O hook mais básico: useToggle. Retorna o estado booleano e uma função pra alternar. Veja como o tipo de retorno fica explícito."}],["$","div","1",{"dangerouslySetInnerHTML":{"__html":"

import { useState, useCallback } from \"react\";\n\ninterface UseToggleReturn {\n  value: boolean;\n  toggle: () => void;\n  setTrue: () => void;\n  setFalse: () => void;\n}\n\nfunction useToggle(initial = false): UseToggleReturn {\n  const [value, setValue] = useState(initial);\n\n  const toggle = useCallback(() => setValue((v) => !v), []);\n  const setTrue = useCallback(() => setValue(true), []);\n  const setFalse = useCallback(() => setValue(false), []);\n\n  return { value, toggle, setTrue, setFalse };\n}\n\n// Uso:\nconst { value: isOpen, toggle } = useToggle();\n// isOpen é boolean, toggle é () => void\n

"}}]]]}]