Can I provide context values using a function in React? - reactjs

Question

I am currently asking myself the following question:
Is it recommended that I define my state and logic directly in the ContextProvider or is it okay if I define the state and logic in a separate function to separate the code a bit?
Example:
const MyContext = React.createContext({});
const createStore = () => {
const [myState, setMyState] = useState();
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children }) => {
const store = createStore();
return (
<MyContext.Provider value={store}>{children}</MyContext.Provider>
)
}
I am a little bit affraid of that createStore function. Does the createStore always gets recreated if the Provider rerenders ?
Edit:
Thanks for the answer!
What if I want to use a parameter in the useCreateStore hook ?
Will the parameter gets updated?
Example:
const MyContext = React.createContext({});
const useCustomStore= (myAwesomeValue) => {
const [myState, setMyState] = useState();
const doSomething = useCallback(() => {
//
}, [myAwesomeValue])
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children, title }) => {
const { myState } = useCustomStore(title); //You need to desctructure the returned object here, note myState
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}

Answer 1

What you are trying to create for your "store" is called a custom hook
You will need to make some changes though. It is customary to use 'use' as the start of a custom hook. so, here I have renamed createStore to useCustomStore. Since it is a custom hook with useState, it follows the same rules as if you actually had it within your context provider
Also, your custom hook returns an object which contains the state and a mutation method. you will need to access the state either directly store.myState or you can destructure it { myState} as I have in the example.
const MyContext = React.createContext({});
const useCustomStore= () => {
const [myState, setMyState] = useState();
return {
myState,
setMyState
}
}
const MyContextProvider = ({ children }) => {
const { myState } = useCustomStore(); //You need to desctructure the returned object here, note myState
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}
Is the same as
const MyContext = React.createContext({});
const MyContextProvider = ({ children }) => {
const [myState, setMyState] = useState();
return (
<MyContext.Provider value={myState}>{children}</MyContext.Provider>
)
}
So rerenders will preserve state, since it uses the useState hook.