Passing callback function to useContext in React

Question

I've created simple context and custom hook to use it and i want to pass callback function through this hook. Is it even possible?

Bear in mind its not the actual code, it's just supersimple representation of an idea. I know that it will fire once even if there is no "receiving hook" present

const SimpleContext = createContext(null): function SimpleContextProvier({children}) { useEffect(() => { setTimeout(() => { // Here i want to execute callback passed through useSimpleContext hook callback?.() }, 10000); }, []) return <SimpleContext.Provider value={null}>{children}</SimpleContext.Provider> } function useSimpleContext(callback) { // Here i need to somehow pass callback to context return useContext(SimpleContext); } 

So i will use it like that:

useSimpleContext(() => { console.log("Ok let's go!"); }) 

Answer 1

In the first line, the use of colons (:) should be a semicolon (;) at the end of the statement.

const SimpleContext = createContext(null); 

The name of the component SimpleContextProvier has a typo, it should be SimpleContextProvider.

The way you try to use the callback in the context is not effective. React Context is not a tool designed to pass callback functions in this way, especially if these functions need to change frequently or are passed on each rendering. It could cause performance issues and hard-to-track bugs.

In the SimpleContextProvider component, you pass null as the context value, which makes any use of the context less useful. You should consider passing relevant values or functions that are actually needed in the consuming components.

The useSimpleContext function is set up to receive a callback, but in reality, the way it is written, it does nothing with this callback. You should modify the logic to allow the context to handle or distribute functions, which is complex and generally not recommended unless absolutely necessary.

The use of setTimeout within useEffect without clearing the timer can lead to unwanted effects if the component is unmounted before the timer expires. You should always clean up timers and subscriptions in React effects.

You could restructure the code so that the context specifically handles the values you need and consider using another global state or a more suitable management pattern if you need dynamic callback functions. Here is a simplified and corrected version considering you only need to pass a simple value:

const SimpleContext = createContext(); function SimpleContextProvider({ children }) { const [callback, setCallback] = useState(() => () => {}); useEffect(() => { const timer = setTimeout(() => { callback(); }, 10000); return () => clearTimeout(timer); }, [callback]); return <SimpleContext.Provider value={setCallback}>{children}</SimpleContext.Provider>; } function useSimpleContext() { return useContext(SimpleContext); } // Usage const setCallback = useSimpleContext(); setCallback(() => { console.log("Ok, let's go!"); }); 

In this code, the callback is managed through state, which allows you to update it safely and ensures that it is properly cleaned up. Additionally, useSimpleContext now returns a function to update the callback, making handling clearer and more functional.