set state action calls into default empty dispatch used to initialize createContext in TSX file #78444

chris-opendata · 2025-04-23T07:57:53Z

chris-opendata
Apr 23, 2025

Summary

I am new to the nextjs framework and Typescript, and currently using the Context mechanism to share global data, following examples online and Copilot. The code segments are as follows:

@types\openai.d.ts:

export interface CallState {
    isConnected: boolean;
}

context\StateContext.tsx:

export interface StateContextProps {
    callState: CallState;
    setCallState: Dispatch<SetStateAction<CallState>>;
}
const defaultContext: StateContextProps = {
    callState: {isConnected: false},
    setCallState: () => {  }
};
const MyContext = createContext<StateContextProps>(defaultContext);
const MyContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [callState, setCallState] = useState<CallState>({isConnected:false});
    return (
        <MyContext.Provider value={{callState, setCallState }}>
            {children}
        </MyContext.Provider>
    );
};
export {MyContext, MyContextProvider};

app_app.tsx:

function MyApp({ Component, pageProps }: AppProps) {
    return (
        <MyContextProvider>
            <Component {...pageProps} />
        </MyContextProvider>
    );
}
export default MyApp;

components\StartButton.tsx:

const StartButton: React.FC = () => {
    const { callState, setCallState } = useContext(MyContext);
    useEffect(() => {
        $(function() {
            $('#start-button').on('click', function() {
                console.log("start-button clicked.");
                const requestSession = async () => {
                    try {
                        // some function here.
                        ... ...
                        setCallState({...callState , isConnected: true});
                    } catch (err) {
                        // setError(err.message);
                    }
                }
                requestSession();
            });
        });
    }, []);
    return (
        <button type="button" id="start-button">Start</button>
    );
};
export default StartButton;

When I debug into setCallState({...callState , isConnected: true}); in StartButton.tsx, I landed at setCallState: () => { } of defaultContext in StateContext.tsx, which does nothing, and therefore doesn't trigger a change that the other component's useEffect (not shown here) depends on.
The reason to provide the defaultContext is to avoid the null assignment error imposed by the strict typing of Typescript, but the examples shown online only provided empty implementations.
If I understood right, the real implementation is done by const [callState, setCallState] = useState<CallState>({isConnected:false}); in StateContext.tsx under hook. But it doesn't seem happen. Could anyone point me out anything I missed?

I am using next.js v15 in VS Code IDE.

Thanks

Additional information

No response

Example

No response

Answered by icyJoseph

Apr 23, 2025

No worries! Please don't forget to also mark as answered :)

View full answer

icyJoseph · 2025-04-23T08:25:52Z

icyJoseph
Apr 23, 2025
Collaborator

Hi,

Are your using App Router, or Pages Router? Could you share a screenshot of your project's file system? It seems to be like you are using App Router, but you have tried to add _app.tsx, to wrap the component tree, which is not the way to do it in App Router, but Pages Router.

In App Router, you'd need to wrap the children in the root, layout.tsx.

2 replies

chris-opendata Apr 23, 2025
Author

Hi,

Are your using App Router, or Pages Router? Could you share a screenshot of your project's file system? It seems to be like you are using App Router, but you have tried to add _app.tsx, to wrap the component tree, which is not the way to do it in App Router, but Pages Router.

In App Router, you'd need to wrap the children in the root, layout.tsx.

I am using App Router. It works now after wrapping the provider with children in RootLayout as follows. It doesn't even need to pass AppProps explicitly.

return (
    <html lang="en">
        <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
            <MyContextProvider>
                {children}
            </MyContextProvider>
        </body>
    </html>

Thank you very much for saving my day.

icyJoseph Apr 23, 2025
Collaborator

No worries! Please don't forget to also mark as answered :)

Answer selected by chris-opendata

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

set state action calls into default empty dispatch used to initialize createContext in TSX file #78444

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

set state action calls into default empty dispatch used to initialize createContext in TSX file #78444

Uh oh!

chris-opendata Apr 23, 2025

Summary

Additional information

Example

Replies: 1 comment · 2 replies

Uh oh!

icyJoseph Apr 23, 2025 Collaborator

Uh oh!

chris-opendata Apr 23, 2025 Author

Uh oh!

icyJoseph Apr 23, 2025 Collaborator

chris-opendata
Apr 23, 2025

Replies: 1 comment 2 replies

icyJoseph
Apr 23, 2025
Collaborator

chris-opendata Apr 23, 2025
Author

icyJoseph Apr 23, 2025
Collaborator