How can I prevent react component from re-rendering by apollo usequery?

I have a react component which is included in my Tabbar(Material-ui).

And this component has lots Apollo useQuery hooks(15 useQuery) to fetch some data. I tried to use loading parameter which are the result of each useQuery in order to prevent useless rendering.

    const { loading: loading_1, data: data_1} = useQuery<GetQuery1>(QUERY_1);
    const { loading: loading_2, data: data_2} = useQuery<GetQuery2>(QUERY_2);
    const { loading: loading_3, data: data_3} = useQuery<GetQuery3>(QUERY_3);

    // . . .

    const { loading: loading_15, data: data_15} = useQuery<GetQuery15>(QUERY_15);

    if (
        loading_1 ||
        loading_2 ||
        loading_3 ||
        // ... loading parameters
        loading_10
    ) {
        return <span>Loading...</span>;
    } 

    return (
        <>
            {loading_11 ? ("Loading ... 11") : (<MyComponent_A data={data_11} options={data_6,data_7}/> )}
            {loading_12 ? ("Loading ... 12") : (<MyComponent_B data={data_12} options={data_1,data_2,data_8}/> )}
            {loading_13 ? ("Loading ... 13") : (<MyComponent_C data={data_13} options={data_4,data_7,data_9}/> )}
            {loading_14 ? ("Loading ... 14") : (<MyComponent_D data={data_14} options={data_8,data_10}/> )}
            {loading_15 ? ("Loading ... 15") : (<MyComponent_E data={data_15} options={data_3}/> )}
        </>
    );

When this component first appeared, I was able to control rendering because loading parameters of useQuery hooks return true.

However, when I reopen this component(I just clicked on the other tabs and came back), this component render 15 times always(I just printed it using console.log() for each component). I checked the loading parameters and those never had a true.

So when I re-opened this component, I didn't even get a loading message and it felt like it was stopping a bit.

How can I solve this?