Can I provide context values using a function in React?

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>
  )
}

GBourke · Accepted Answer · 2020-09-01 09:42:45Z

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.

answered Sep 1, 2020 at 9:42

GBourke

1,9631 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jan Höck Over a year ago

Thanks you for the clear answer :) I already thought that I have to prefix it with use, because React is doing some magic under the hood with that prefix.

GBourke Over a year ago

You don't need to use the use prefix, you can all the custom hook whatever you like.. its just "good practice" to do so. Yes, you should pass an initial state into the hook useState(initialState), and then mutate the state using the setMyState mutation method provided by the useState hook

Jan Höck Over a year ago

I have edited my main post and added a different question. I was not able to post code in this comment section here

Collectives™ on Stack Overflow

Can I provide context values using a function in React?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related