Skip to content

Reset state of useImage after dependency changed #37

@KrzysztofMoch

Description

@KrzysztofMoch

Problem

After changing source in useImage hook eg. via useState, hook state does not reset to "loading state" ({ image: undefined, error: undefined })

const [random, setRandom] = React.useState<number>(0)
const { image, error } = useImage({ url: `https://picsum.photos/seed/${random}/200/300` })

return (
  <View>
    {image ? <NitroImage image={image} style={{ width: 170, height: 170 }} /> : <Text>Loading...</Text>}
    {error ? error.message : null}
    <Button title="Random Image" onPress={() => setRandom(prev => prev + 1)} />
  </View>
)

In this example, after we update url I would expect it, state to be reset (image should be undefined) as we are now again in loading state

Now, even if we update "source" and it returns "new" Result, NitroImage does not update displayed image

Proposed Solution

Add clean up function to useEffect in useImage hook, and set image to default/loading state

export function useImage(source: AsyncImageSource): Result {
    const [image, setImage] = useState<Result>({
        image: undefined,
        error: undefined,
    });

    // biome-ignore lint: The dependencies array is a bit hacky.
    useEffect(() => {
        (async () => {
            try {
                const result = await loadImage(source);
                setImage({ image: result, error: undefined });
            } catch (e) {
                const error = e instanceof Error ? e : new Error(`${e}`);
                setImage({ image: undefined, error: error });
            }
        })();

        // here add cleanup function so once deps did change we are back to default/loading state
        return () => {
            setImage({ image: undefined, error: undefined });
        }
    }, [isHybridObject(source) ? source : JSON.stringify(source)]);

    return image;
}

If this is something we can do, I can make PR 😄

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions