rl-core-front 0.18.1 → 0.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/hooks/use-tab-state.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 
 import { safeStorage } from "#core/_utils/storage";
 
@@ -58,7 +58,7 @@ export function useTabState<T extends string>(
   // render.
   const known = useRef(tabs);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     known.current = tabs;
   });
 
@@ -68,7 +68,12 @@ export function useTabState<T extends string>(
 
   // Hidrata uma vez, no cliente: no primeiro render do Next não há `window`,
   // e ler ali faria o servidor e o navegador desenharem abas diferentes.
-  useEffect(() => {
+  //
+  // `useLayoutEffect`, e não `useEffect`: o passivo roda depois da pintura, e
+  // o F5 mostrava a aba padrão por um quadro antes de pular para a certa.
+  // O de layout corre antes de o navegador desenhar — a primeira imagem já é
+  // a aba salva. No servidor o React o ignora, que é o que se quer.
+  useLayoutEffect(() => {
     const fromUrl = readFromUrl();
     const fromStorage = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
     const resolved = isTab(fromUrl) ? fromUrl : isTab(fromStorage) ? fromStorage : defaultTab;