Tab.Screen does not re-render

data should update when useEffect runs, and it does. However, the change doesn't cause a rerender in the Liked page of the Tab Navigator, where it is passed as a route.params parameter.

Why doesn't the re-render happen?

Home.js

  const [data, setData] = useState([{name: 'test'}]);    console.log('DATA', data);    // {lastVisible} for keep track of firebase paging    const Tab = createMaterialTopTabNavigator();    const navigator =     <Tab.Navigator>    <Tab.Screen name="posts" component={FeedList} initialParams= />    <Tab.Screen name="Liked" component={FeedList} initialParams= />  </Tab.Navigator>;      useEffect(()=>{      fetchChatGroups().then((ar) => {        setData(ar);      });    ...  return <>{navigator}</>  

Is initialParams not subject to re-renders of useState variables of parent components? When I print the value of route.params.videoData in FeedList, I get the following:

[Sat Jan 02 2021 19:54:41.145]  LOG      [{"name":"test"}]  

which means the state stayed as default, even though I confirmed that the state does change with a console print with this line: console.log('DATA', data);

https://stackoverflow.com/questions/65546494/tab-screen-does-not-re-render January 03, 2021 at 11:55AM