title: why when the function is called. an extra rerender happens (React)
body: <p>see image please
  <a href="https://i.stack.imgur.com/Px7Mb.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>when to write a call to useGetAppState() . so that there is no extra render</p>
  <pre><code>import React from 'react';
  
  import './App.css';
  import { RoutesSwitcher } from './app/containers/RoutesSwitcher';
  import { useGetAppState } from './common/hooks';
  
  import 'react-phone-input-2/lib/style.css';
  
  const App: React.FC = () =&gt; {
    useGetAppState();
  
    return &lt;RoutesSwitcher /&gt;;
  };
  
  export default App;
  </code></pre>
  <p>my component useGetAppState</p>
  <pre><code>export const useGetAppState = () =&gt; {
    const dispatch = useDispatch();
  
    useAPIHook&lt;undefined, GetAppStateRes&gt;({
      req: API.app.getState,
      enabled: true,
      onSuccess: (response) =&gt; {
        dispatch(setAppState(response));
      },
    });
  };
  </code></pre>
  <p>My component useAPIHook,My component useAPIHook,My component useAPIHook,My component useAPIHookMy component useAPIHook,My component useAPIHook,My component useAPIHook</p>
  <pre><code>export type APIArgs&lt;T extends ((args: unknown) =&gt; unknown) | undefined&gt; = T extends (args: unknown) =&gt; unknown
    ? Parameters&lt;T&gt;[0]
    : undefined;
  
  export type APIReturn&lt;T extends (args: unknown) =&gt; Promise&lt;AxiosResponse&lt;unknown&gt;&gt;&gt; = ReturnType&lt;T&gt;;
  
  type ReturnHookType&lt;T, K&gt; = {
    isLoading: boolean;
    isError: boolean;
    apiRequest: (args?: T) =&gt; Promise&lt;AxiosResponse&lt;K&gt;&gt;;
    data?: K;
    isFetched: boolean;
  };
  
  type Props&lt;T, K&gt; = {
    req: (args: T) =&gt; Promise&lt;AxiosResponse&lt;K&gt;&gt;;
    onError?: (error?: AxiosError | null | unknown) =&gt; void;
    onSuccess?: (args: K) =&gt; void;
    enabled?: boolean;
    apiArguments?: T;
  };
  
  export const useAPIHook = &lt;T, K&gt;({
    req,
    onSuccess,
    onError,
    enabled,
    apiArguments,
  }: Props&lt;T, K&gt;): ReturnHookType&lt;T, K&gt; =&gt; {
    const [isFetched, setIsFetched] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [isError, setIsError] = useState(false);
    const [data, setData] = useState&lt;K | undefined&gt;(undefined);
  
    const apiRequest = async (args?: T) =&gt; {
      try {
        setIsError(false);
        setIsLoading(true);
        setIsFetched(true);
        const response = await req(args as T);
        const { data: responseData } = response;
        setData(responseData);
        if (onSuccess) onSuccess(responseData);
        setIsLoading(false);
        return response;
      } catch (error: AxiosError | unknown) {
        setIsLoading(false);
        setIsError(true);
        if (onError) onError(error);
        throw error;
      }
    };
  
    useEffect(() =&gt; {
      if (enabled) {
        apiRequest(apiArguments);
      }
    }, [enabled]);
  
    // @ts-ignore
    return { isLoading, apiRequest, isError, data, isFetched };
  };
  </code></pre>