Rules Hub
Coding Rules Library
Prevent Flash of Unwanted Content by defaulting to hidden
Set initial element visibility to hidden when controlling it via client-side JavaScript to avoid UI flickering.
Bad example
| 1 | // HTML: <div id="promo-banner">Sign up now!</div> |
| 2 |
|
| 3 | export function PromoController() { |
| 4 | const { isSubscriber } = useUser(); |
| 5 |
|
| 6 | useEffect(() => { |
| 7 | const banner = document.getElementById('promo-banner'); |
| 8 | // BAD: The banner is visible by default in HTML. |
| 9 | // Users see it briefly before this effect runs and hides it. |
| 10 | if (isSubscriber && banner) { |
| 11 | banner.style.display = 'none'; |
| 12 | } |
| 13 | }, [isSubscriber]); |
| 14 |
|
| 15 | return null; |
| 16 | } |
Explanation (EN)
The element is visible by default in the HTML. When the JavaScript runs (hydration/effect), it hides the element, but users perceive a jarring 'flash' of the content disappearing immediately after page load.
Objašnjenje (HR)
Element je prema zadanim postavkama vidljiv u HTML-u. Kada se JavaScript izvrši (hidracija/efekt), on sakriva element, ali korisnici primjećuju kratki 'bljesak' sadržaja koji nestaje odmah nakon učitavanja stranice.
Good example
| 1 | // HTML: <div id="promo-banner" class="hidden">Sign up now!</div> |
| 2 |
|
| 3 | export function PromoController() { |
| 4 | const { isSubscriber } = useUser(); |
| 5 |
|
| 6 | useEffect(() => { |
| 7 | const banner = document.getElementById('promo-banner'); |
| 8 | if (!banner) return; |
| 9 |
|
| 10 | // GOOD: Default is hidden. We only toggle visibility based on state. |
| 11 | // 'toggle' adds 'hidden' if true, removes it if false. |
| 12 | banner.classList.toggle('hidden', isSubscriber); |
| 13 | }, [isSubscriber]); |
| 14 |
|
| 15 | return null; |
| 16 | } |
Explanation (EN)
The element is hidden by default in the HTML. The JavaScript logic then determines if it should be shown or kept hidden. This prevents the 'Flash of Unwanted Content' (FOUC) entirely.
Objašnjenje (HR)
Element je prema zadanim postavkama skriven u HTML-u. JavaScript logika zatim određuje treba li ga prikazati ili zadržati skrivenim. Time se u potpunosti sprječava 'bljesak neželjenog sadržaja' (FOUC).
Notes (EN)
Alternatively, moving the element entirely into the React component tree (instead of manipulating the DOM externally) is often a cleaner architectural solution if possible.
Bilješke (HR)
Alternativno, premještanje elementa u potpunosti unutar React stabla komponenti (umjesto vanjske manipulacije DOM-om) često je čišće arhitektonsko rješenje ako je izvedivo.