Hooks not wrapped with useCallback cause contant re-renders

[JustMeGaaRa]

I use the "openFilePicker" function in my callback, and pass this callback to useEffect, and since "openFilePicker" is not wrapped in useCallback, the function constantly changes and triggers my useEffect, hence creating a constant rerendering of my UI.

Code sample:

`

const { openFilePicker } = useFilePicker({ accept: ".dsl", multiple: false });

const handleOnClickWorkspaceImport = useCallback(() => {
    openFilePicker();
}, [openFilePicker]);

useEffect(() => {
    setHeaderContent({
        right: (
            <ButtonGroup mr={4} variant={"filled"}>
                <IconButton
                    aria-label={"import workspace"}
                    colorScheme={"gray"}
                    icon={<Icon as={Upload} boxSize={5} />}
                    title={"Import Workspace"}
                    onClick={handleOnClickWorkspaceImport}
                />
            </ButtonGroup>
        )
    })
}, [setHeaderContent, handleOnClickWorkspaceImport]);

`

[MrKampla]

Hi @JustMeGaaRa, thanks for spotting that, we'll fix this in the next patch release

[MrKampla]

@JustMeGaaRa Fixed in v2.1.2. Please remember to wrap your props that you pass to useFilePicker with useMemo:

const ufpProps = useMemo(() => ({ accept: ".dsl", multiple: false }),[]);
const { openFilePicker } = useFilePicker(ufpProps);

This should result in a steady reference to openFilePicker function