I need my DOM to rerender when a function finishes as otherwise it doesnt show the information I need
#Force rerendering of the html in react
latent gull
hard atlas
you can use the useEffect hook for that
that hooks takes an array of dependencies
when one of the dependencies changes, the component re-renders
@latent gull
but it also depends how you're displaying your data in the first place
if you're using a useState hook to store the returned value, then you shouldn't have to do anything, it should re-render automatically
neat ore
you can use the `useEffect` hook for that
or rather, a useEffect to run the function, a setMyWhateverState to make the component re-render
latent gull
if you're using a `useState` hook to store the returned value, then you shouldn'...
the problem I am having is that I am using useState to store my information but it gets the information from an async function and it wont display the result of the async request here is my code
{days[0] ? days[0].map(lesson => {
return <LessonRoom lesson={lesson.name} room={lesson.room} />
}) : null }
//That is the component beings mapped from the useState (days)
//it wont work though at the moment as the dom doesnt rerender so it doesnt end up displaying the information
how are you running the async function
latent gull
It is being called from the onAuthStateChanged hook as I am using firebase
latent gull
its an array of arrays full of objects
latent gull
oh right setDays() and it is set with all of the arrays
neat ore
latent gull
sorry could you elaborate on your question?
type Lesson = {name: string; room: string}
type Day = Lesson[]
setDays(data as Day)
@neat ore
neat ore
if you're calling setDays and the component depends on days, then react should definitely be re-rendering
latent gull
Thats the problem, It isnt as it does not change
honest pilot
Can you share a little bit more code? What is your initial day state? Do you have an example of what is being returned from your async function?
It is entirely possible the check simply isn't correct.
Consider the following:
const a = [];
a[0] ? true : false; // false
i.length !== 0 ? true : false // true
type Lesson = {name: string; room: string}
type Day = Lesson[]
setDays(data as Day)
{days[0] ? days[0].map(lesson => {
return <LessonRoom lesson={lesson.name} room={lesson.room} />
}) : null }
the async function does not return anything it just sets the days in useState
honest pilot
The entire component would be much more helpful.
latent gull
one moment
I have left out the imports, Sorry its a pastebin the message would be too long
latent gull
The entire component would be much more helpful.
I couldnt find another way of doing it
but the strange part is that the component loads with all of the information if I wait until after the page loads and then ctrl-s the file and vite reloads it and it all shows the information
honest pilot
Let me have a look.
Did you try what @hard atlas suggested? It seems like you are missing useEffect. When your component mounts, the state would have been [], but you didn't tell the component to execute side effects, hence your function declarations would just simply be … declarations
Try adding this:
useEffect(() => {
const getCreds = async()...
const fetchTimetable = async() ...
fetchTimetable();
}, [])
The problem is I have to call get creds using onAuthStateChanged
vale delta
also you are expecting back a single Day and not Day[]? your useState is not typed the same
latent gull
as one of the parameters is the auth.currentuser.uid
latent gull
also you are expecting back a single `Day` and not `Day[]`? your `useState` is n...
in the decalaration of the userState I have useState<Day[]>([]) which tells it the type already
vale delta
.then(data => {
setDays(data as Day)
})
That is fine, you can pass it in as a component prop
In fact, if you insist on just observing auth state inside your component, then just have another state called auth or something
Components re-renders on prop change, so you can have a prop in your Timetable component like { uid: string} , and then simply pass that in as an argument to getCred.
vale delta
not a cause of your issue, but it would also be more idiomatic to store isFetched in a useState or useRef
honest pilot
not a cause of your issue, but it would also be more idiomatic to store `isFetch...
I think this component may need a bit of refactoring but yes, it should be a state.
latent gull
not a cause of your issue, but it would also be more idiomatic to store `isFetch...
isFetched exists only to stop infinite loops
honest pilot
isFetched exists only to stop infinite loops
Ahh but that's where you got it wrong and where useEffect can help you 😉
latent gull
Oh right, So if I essentially wrap most of it in a useEffect it would work?
honest pilot
That is correct! In fact, it's even inside the React documentation!
Just remember to define the dependency in useEffect to prevent the infinite loop issue.
vale delta
useEffect takes a dependency array as the last argument. basically what it says is - if something in my dependency array changes, I should run this 'effect' again. In your case, wether you fetch your data or not is dependent on having auth, also on wether you have the data or not etc.
latent gull
Just remember to define the dependency in `useEffect` to prevent the infinite lo...
Yes I will do, something like
useEffect(() => {
most of my code
}, [auth.currentuser.uid]
latent gull
Ok thank you I will try that now
vale delta
and make sure auth is not some global variable, or a ref, as your component wouldn't re-render then
latent gull
and make sure auth is not some global variable, or a ref, as your component woul...
sorry, what do you mean? Auth is a variable imported from the firebase config File I set up so that It would be accessible anywhere I need it, although the onAuthStateChanged() is the main way of accessing this
honest pilot
Accessing your config should either be done by a function or programmatically, instead of direct import. Putting it as something that all your components can access would potentially pollute function namespace and make things harder to debug
and as Frosk said, may potentially trigger unwanted re-renders
latent gull
Thats why I was using the onAuthStateChanged hook as it prevents that problem by only calling the function when logged in
honest pilot
You don't need that in your component though, because your <Timetable> component would likely be called by another component, in which case, you can have the parent component hold the auth information and pass it down to Timetable. Your Timetable component would observe the state of auth itself
But 🤷♂️ we don't have the full view of the code, so if it works for you then it should be fine I guess!
Avoiding global is more of a convention so your code appears clean and maintainable, but it's not mandatory !
latent gull
well, you were right, The useEffect fixed the problem, All I had to do was add a wrapper to the code, originally I thought It would not work as I thought the onAuthStateChanged was neccessary but nonetheless your help has been great Thank you!
@hard atlas Sorry I didnt Take your advice sooner Thank you for your help!
honest pilot
😄
latent gull
Avoiding global is more of a convention so your code appears clean and maintaina...
I will try that next time! It seems that importing that was not useful in the first place
hard atlas
!resolved