reactjs - How to avoid from multipe renders in a single react native component

Question

This is my home screen, here in useEffect I am calling functions. All functions behind the scene return some response from some API's, so my home screen renders 6 times. Please suggest to me how to avoid this behavior.

useEffect(() => {
    dispatch(getCities());
    dispatch(getHotels());
    dispatch(getRooms());
    dispatch(getNews());
    dispatch(getDeals());
    dispatch(getDestinations());
}, []);

question from:https://stackoverflow.com/questions/65601588/how-to-avoid-from-multipe-renders-in-a-single-react-native-component

Answer 1

You can wrap your component with memo (https://reactjs.org/docs/react-api.html#reactmemo). This will generate a memorized version of your component that will mount again only if some of its props change the value. If your six functions calls don't change the preview props values the component will not cause a re-render.