Rifat Cholakov's questions

Estou usando React com typescript.

O initialDatapermanece o mesmo nullquando eu consoloe.log mesmo que eu esteja atualizando o valor dentro do arquivo useEffet.

E por que esse código em loop está constantemente fazendo solicitações?

Este é o meu context:

import React, {
    Dispatch,
    SetStateAction,
    createContext,
    useContext,
    useState,
} from 'react';

interface InitialDataType {
    GameName: string;
    GameUrl: string;
    HasRegulation: boolean;
    HideNavBar: boolean;
    HideSessionNetLoss: boolean;
    HideSessionTimer: boolean;
    RegulationAction: string;
    RegulationModel?: string;
    TournamentId?: number;
    TournamentType?: number;
    TournamentsBaseUrl?: string;
    Url: string;
    VendorController: string;
}

interface InitialDataContextInterface {
    initialData: InitialDataType | null;
    setInitialData: Dispatch<SetStateAction<InitialDataType | null>>;
}

const Context = createContext({} as InitialDataContextInterface);

const InitialDataProvider = ({ children }) => {
    const [initialData, setInitialData] = useState<InitialDataType | null>(
        null
    );

    return (
        // eslint-disable-next-line react/jsx-no-constructed-context-values
        <Context.Provider value={{ initialData, setInitialData }}>
            {children}
        </Context.Provider>
    );
};

export default InitialDataProvider;

export const useInitialData = () => useContext(Context);

Este é o meu HomeComponent:

import React, { useContext, useEffect } from 'react';
import axios from 'axios';
import UkRegulation from '../../regulations/UkRegulation/UkRegulation';
import GameIframe from '../../components/GameIframe/GameIframe';
import { useInitialData } from '../../context/InitialDataContext';

const Home = () => {
    const { initialData, setInitialData } = useInitialData();

    useEffect(() => {
        axios
            .get(
                'https://myUrl.com/my-endpoint'
            )
            .then((response) => {
                setInitialData(response.data);
                console.log('InitialData', initialData);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

    return (
        <div>
            <UkRegulation />
            <GameIframe />
        </div>
    );
};

export default Home;