Relative Content

Tag Archive for reactjstypescriptreact-context

useContext, typescript. What am I not getting here?

So I have been doodling with react and typescript for a bit.
Initially working with javascript, but now trying to explore typescript.
I had a ok grasp on useContext in js, with simple a simple boolean state.

Wait for React context data to load before rendering consumers?

I’m using a React context in Typescript to load the user data about the user who’s logged into my app (name, id, email etc.). However, when I use the useContext hook to access that data, which I’m fetching from an API, the data that comes back could be null/undefined if the hook hasn’t completed yet (understandably so). However, if I have other hooks that are dependent on user data (like looking up data with the user id), I don’t want that user data to potentially be undefined. I understand that I could use an isLoading field on the context, but since I will be needing this user data on just about every screen that’s a child of this context provider, I would prefer if none of the context provider’s children be loaded/rendered until the user data finished, so that when I use useContext to access the user data, it must be defined. Is there a way to do this or am I not thinking about contexts in the right way?