assuncaocharles/react-indexed-db

useIndexedDB it is not a hook. It is just a plain function and always return a new object.

Closed this issue · 1 comments

simprl commented

react-indexed-db/src/indexed-hooks.ts

Line 36 in 5acba61

export function useIndexedDB(

It is not a hook. Custom hooks should call other hooks. I do not see hooks inside useIndexedDB.

Issue:
useIndexedDB always return new object.
So when I use result of this function in useEffect it always recall.

const Component = () => {
	const db = useIndexedDB('zzz');
        useEffect(() => {
             ........call db.getByIndex() or db.add()
        }, [db]); //deps always change
}

Recall because db is always new object;

Could you rename useIndexedDB to getIndexedDB?
In this case I can memoize it:

const Component = () => {
	const db = React.useMemo(() => getIndexedDB('zzz'), []);
        useEffect(() => {
             ........call db.getByIndex() or db.add()
        }, [db]); //deps is not change
}

Or could you add memoization into useIndexedDB?

dethstrobe commented

This can be closed now. I refactored this in #59 to use useMemo here https://github.com/assuncaocharles/react-indexed-db/blob/master/src/indexed-hooks.ts#L56

Also, it was a hook, useCallback was being used instead to memoize the methods on the object. It just wasn't entirely optimal as @simprl pointed out. It'd always create a new object with every rerender.

  • 👍1