React component re-rendering although all props do not change

Question

I use setInterval to get data every 15seconds.

useEffect(() => {
  const interval = setInterval(() => {
    onGetCarInfo();
  }, 15000);

  return () => {
    clearInterval(interval);
  };
}, []);

But I have a problem. I use it in Home_screen component. But other components re-rendering every 15seconds even though they weren't in use response data. (I used React.memo but it's still re-rerendering)

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <Tab.Navigator>
      <Tab.Screen name={Name.Name_monitoring} component={Home_screen} />
      <Tab.Screen name={Name.Name_journey} component={SupJourney} />
      <Tab.Screen name={Name.Name_images} component={MultipleCams} />
      <Tab.Screen name={Name.Name_report} component={Reports} />
    </Tab.Navigator>
  );
}

I have checked and see that they re-render because store re-renders. But why components re-render even though props don't change?

So how should I solve this problem?

Answer 1

This is my mistake. I use a same function and dont push response to store and solve this problem.

useEffect(() => {
  const fetchData = async () => {
    const username = await AsyncStorage.getItem('username');
    const tokenKey = await AsyncStorage.getItem('tokenKey');

    try {
      const params = {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${tokenKey}`,
        },
      };

      const response = await fetch(
        `${API_GET_TI_BASE}?loginName=${username}`,
        params,
      );
      const body = await response.json();

      setlocalData(body);
    } catch (error) {
      console.log('getCarInfo error: ', error);
    }
  };

  const interval = setInterval(() => {
    fetchData();
    // onGetCarInfo();
  }, 15000);

  return () => {
    clearInterval(interval);
  };
}, []);