Component not re-rendering after Context change - reactjs

Question

"myGroups" is a context variable. In my context store, I am fetching data from a database and populating this "myGroups" variable. So initially it contains only an empty array, after some time it contains an array of objects. e.g. [{id: "", data: ""}]
I want to render these groups. So I am mapping through the myGroups variable, and trying to render them.
But the problem is that even after context updating, my component does not re-render. I have console logged and seen that the fetching of data works absolutely fine, though it takes some time to do so.
Does changing the context does not rerender it's consumer? Why is the component not rerendering? It would be of great help if you can provide some solution. Thanks in Advance.
Here is my code.
import React, { useContext, useEffect, useState } from 'react';
import "../css/MyGroups.css";
import GroupCard from './GroupCard';
import { GlobalContext } from '../context/GlobalState';
const MyGroups = () => {
const { myGroups } = useContext(GlobalContext);
useEffect(() => console.log(myGroups), [myGroups]); // Debugging
return (
<div className="my__groups">
<h1 className="my__groups__heading">My Groups</h1>
<div className="my__groups__underline"></div>
<div className="my__groups__grid__container">
{
myGroups.map(({id, data}) => (
<GroupCard
key={id}
name={data.name}
image={data.image}
/>
))
}
</div>
</div>
)
}
export default MyGroups
This is what I get on the console when the context changes:
Console log image
My Global Provider:
<GlobalProvider>
<BrowserRouter>
<Main />
</BrowserRouter>
</GlobalProvider>
The MyGroups Component is a descendant of the Main Component.
Edit 1: Fetch Function of my Store
function fetchGroupsFromDatabase(id) {
let myGroups = [];
db.collection("users").doc(id).get() // Fetch user details with given id
.then(doc => {
doc.data().groupIDs.map(groupID => { // Fetch all group IDs of the user
db.collection("groups").doc(groupID).get() // Fetch all the groups
.then(doc => {
myGroups.push({id: doc.id, data: doc.data()})
})
})
})
.then(() => {
const action = {
type: FETCH_GROUPS_FROM_DATABASE,
payload: myGroups
};
dispatch(action);
})
}
Edit 2: Reducer
const Reducer = (state, action) => {
switch(action.type) {
case FETCH_GROUPS_FROM_DATABASE:
return {
...state,
myGroups: action.payload
};
default:
return state;
}
}
export default Reducer;

Answer 1

As Yousaf said, not need to using useState and useEffect. You can use context in two different way
first:
const MyGroups = () => (
<GlobalContext.Consumer>
{({ myGroups }) => (
<div className="my__groups">
<h1 className="my__groups__heading">My Groups</h1>
<div className="my__groups__underline"></div>
<div className="my__groups__grid__container">
{myGroups.map(({id, data}) => (
<GroupCard
key={id}
name={data.name}
image={data.image}
/>
))
}
</div>
</div>
)}
</GlobalContext.Consumer>
);
second:
const MyGroups = () => {
const { myGroups } = useContext(GlobalContext);
return (
<div className="my__groups">
<h1 className="my__groups__heading">My Groups</h1>
<div className="my__groups__underline"></div>
<div className="my__groups__grid__container">
{myGroups.map(({ id, data }) => (
<GroupCard key={id} name={data.name} image={data.image} />
))}
</div>
</div>
);
};
Edit:
the problem comes from the Fetch Function it based on this answer should be like this:
async function fetchGroupsFromDatabase(id) {
const doc = await db.collection("users").doc(id).get() // Fetch user details with given id
const myGroups = await Promise.all(
doc.data().groupIDs.map(groupID => // Fetch all group IDs of the user
db.collection("groups").doc(groupID).get() // Fetch all the groups
.then(doc => ({ id: doc.id, data: doc.data() }))
)
);
const action = {
type: FETCH_GROUPS_FROM_DATABASE,
payload: myGroups
};
dispatch(action);
}