I ran into this issue by trying to resolve this warning from the eslint-plugin-react-hooks:
warning React Hook useEffect has a missing dependency: 'promisedObject'. Either include it or remove the dependency
Sounds simple enough. I added it, but now my app gets bogged down. The more my component renders/updates, the slower my app gets. I think that means that there's a memory leak or something. I do not have this issue when I do not have promisedObject
in my dependency array.
export default function MyComponent(props: MyProps): ReactElement { const [myObject, setMyObject] = useState<MyObject>(new MyObject()); const promisedObject: Promise<MyObject> = useMyCustomHook(); useEffect(() => { (async () => { const storedObject = await promisedObject; if (storedObject != null) { setMyObject(storedObject); } })(); // promisedObject causes a memory leak, I think // I could disable eslint for this line, but that's a last resort. }, [props.key, promisedObject]); return (<View><Text> {myObject.someValue()}</Text></View> );}
A few things to keep in mind
myCustomHook()
is making calls toAsyncStorage
if that's relevantpromisedObject
isn't necessary to be updated. I prefer it to only be loaded once.
What's going wrong here?