Comments (6)
@fastest963 I'm struggling to reproduce this.
setValue(undefined)
will only ever be called when there is no document reference sent to useDocumentOnce
.
When a document reference is specified then the state is reset and loading
is set to true
until a response is received from Firestore, at which point the DocumentSnapshot
will be set as the value.
My test case for this is as follows, which tests by cycling through two different document references and a null reference:
const FirestoreDocument = () => {
const [ path, setPath ] = useState('hooks/nBShXiRGFAhuiPfBaGpt');
const ref = path ? firebase.firestore().doc(path) : null;
const { error, loading, value } = useDocumentOnce(ref);
const togglePath = () => {
setPath(prevState => prevState === 'hooks/nBShXiRGFAhuiPfBaGpt' ? 'hooks2/32ofSNdNtGL487vpSpZZ' : prevState === 'hooks2/32ofSNdNtGL487vpSpZZ' ? null : 'hooks/nBShXiRGFAhuiPfBaGpt');
}
return (
<div>
<p>
{error && <strong>Document Error: {error}</strong>}
{loading && <span>Document: Loading...</span>}
{!loading && (
<span>
Document: {value ? JSON.stringify(value.data()) : 'undefined'}
</span>
)}
</p>
<p>
<button onClick={togglePath}>Toggle Path</button>
</p>
</div>
);
}
from react-firebase-hooks.
@chrisbianca interesting. I assume this is some sort of race condition then. If I add a breakpoint and am able to step through the stack, is there anything that would help you identify how it's happening?
from react-firebase-hooks.
So I've just been doing some digging, and it looks like there is an extra render cycle which is causing what you're seeing. In my example above, I've added some logging, which produces the following when switching from null
to a proper doc reference:
// Loaded state with `null` document reference
Time: 1557241681875; Error: undefined; Loading: false; Value: undefined
// Click button to switch to document
Toggle: hooks/nBShXiRGFAhuiPfBaGpt
// Previous state is rendered again once
Time: 1557241823511; Error: undefined; Loading: false; Value: undefined
// New loading state is rendered
Time: 1557241823514; Error: undefined; Loading: true; Value: undefined
// Document has loaded
Time: 1557241823877; Error: undefined; Loading: false; Value: [object Object]
As I understand it, the reason for this is that toggling the button calls setState
which triggers a render. It is only on this render that the firebase hook can update the document reference, hence why there is a repeat render of the "old" state.
In essence this shouldn't cause an issue, but it's not ideal. I'll do some reading / digging to see if there's a better way to workaround this sort of issue when chaining hooks together.
from react-firebase-hooks.
@chrisbianca I might have found a solution for this issue
I don't think it is correct to call setValue in the hooks when no value is present, a reset sounds more logical and solves the loading state switching to loaded.
from react-firebase-hooks.
Hey all. I'd like to reopen this issue as it is still causing some grief for me. The basic flow is:
const {userId} = useContext(UserContext);
const [profile, loading, error] = useDocumentData(userId ? firestore().collection('profiles').doc(userId) : null);
console.log(userId, profile, loading, error);
Assuming the userId
starts off as undefined
as it is loaded in context, you get the following console.log
:
1. undefined, undefined, false, undefined
2. 'fxxxxxx01', undefined, false, undefined
3. 'fxxxxxx01', undefined, true, undefined
4. 'fxxxxxx01', {documentData}, false, undefined
The problem is number 2. causes issues downstream, because I might want to take a case where the profile
hasn't yet been setup by the user, but it's impossible to check between that state (where the console.log
would look like 'fxxxxxx01', undefined, false, undefined
) and number 2. which will happen everytime I check - I've actually resorted to a debounce hook 😱
from react-firebase-hooks.
I also seem to be getting the same issue described by @royletron
uid is initially undefined, and a value is then loaded/set via context
const data = (uid: string) => { const [value, loading, error] = useDocumentData( uid ? db().collection(uid).doc("doc") : null );
My current solution is the following
const data = (uid: string) => { const [value, loading, error] = useDocumentData( uid ? db().collection(uid).doc("doc") : db().collection("FAKE_VALUE_NOT_EXISTING_IN_DB").doc("doc") );
Passing any reference seems to set the loading state correctly. Not sure if i am potentially causing other issues but seems to work for now
from react-firebase-hooks.
Related Issues (20)
- useAuthState wont update user.emailVerified until page is refreshed
- How do I add infinite scroll/pagination? HOT 1
- What's the suggestion for token refresh? HOT 1
- reload() doesn't update existing items with useCollectionOnce
- addition of confirmPasswordReset hook.
- useDocumentData returns undefined on first render until forced browser refresh returns data
- Failed to resolve entry for package "react-firebase-hooks"
- useSignInWithGoogle: Cross-Origin-Opener-Policy policy would block the window.closed call HOT 2
- useSignInWithEmailAndPassword BadRequestError
- Project is abandoned? HOT 4
- I can not get id for each item in the collection with useCollectionData hook HOT 2
- `useSendPasswordResetEmail` does not return an error when an unregistered email is used HOT 3
- user in useAuthState return undefined on refresh
- FirebaseError with useDocumentData Hook with [email protected] HOT 4
- useAuthState() and useIdToken() not logging the user in with Google
- How to include sub-collection in each item of a collection
- useSendEmailVerification missing actionCodeSettings
- Missing useConfirmPasswordReset hook?
- useHttpsCallback should reject when the call fails
- window is not defined in NextJS client component HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-firebase-hooks.