@heroui/use-image@2.1.14

heroui-inc/heroui@heroui/use-image@2.1.14Jan 29, 2026by github-actions[bot]

AI Summary

Fixes a critical race condition in the use-image hook that caused cached images to remain invisible on Firefox and Safari.

Key Highlights

Fixes race condition with cached images on Firefox and Safari
Attaches event handlers before setting image src
Checks both naturalWidth and naturalHeight for valid images
Prevents stale closures in useCallback dependencies

Full Release Notes

### Patch Changes

-   [#6041](https://github.com/heroui-inc/heroui/pull/6041) [`5ec842b`](https://github.com/heroui-inc/heroui/commit/5ec842b1cf6fff845b7ae7cd8fb876762e62e279) Thanks [@brianatdetections](https://github.com/brianatdetections)! - Fix race condition in use-image hook that caused cached images to remain invisible (stuck at opacity-0) on Firefox and Safari.

    **Root Cause:**
    Event handlers (`onload`/`onerror`) were attached AFTER setting the image `src`. For cached images, the browser fires `onload` synchronously when `src` is set, causing the event to be missed. This is particularly prevalent in Firefox and Safari due to their JavaScript execution timing characteristics.

    **Solution:**

    -   Attach `onload`/`onerror` handlers BEFORE setting `src`
    -   Check both `naturalWidth` AND `naturalHeight` (per CodeRabbit review feedback on #4523)
    -   Handle synchronous error callbacks for failed cached images
    -   Include `ignoreFallback` in useCallback dependencies to prevent stale closures when prop changes dynamically
    -   Add comprehensive test coverage including synchronous callback scenarios and dynamic `ignoreFallback` changes

    Fixes #4534, #2259