5

Trying to learn how to use react hooks. I use createContext and I want to transfer together state and a function to other components, but I need help with how to do this. I also want to ask if it makes sense to do so.

In fact, I can update state by using setState in my case, but by defining a function in context, I think it makes more sense to use this function anywhere. Am I wrong ?

my context is :

export const ExpenseContext = createContext();

export const ExpenseProvider = props => {
  const [expense, setExpense] = useState(initialExpenses)

  const clearItems = () => {
    setExpense([])
  }

  return ( <
    ExpenseContext.Provider value = {
      [expense, setExpense],
      clearItems
    } > {
      props.children
    } <
    /ExpenseContext.Provider>
  )
}

The component I want to use this function :

const ExpenseList = () => {
  const [expense, setExpense] = useContext(ExpenseContext);
  const {
    clearItem
  } = useContext(ExpenseContext);

  //   const clearItems = () => { normally this works ı know! 
  //     setExpense([])
  // }

  return ( <
    >
    <
    List > {
      expense.map((expense) => {
        return <Item key = {
          expense.id
        }
        expense = {
          expense
        }
        />;
      })
    } <
    /List> <
    div className = "text-center" > {
      expense.length > 0 && ( <
        Button onClick = {
          clearItems
        }
        type = "danger"
        shape = "round"
        icon = { < DeleteOutlined / >
        } >
        Clear Expenses <
        /Button>
      )
    } <
    /div> < /
    >
  );
};

in this case, it is possible to use this function directly within the component without trying to transfer the function. But what I'm curious about is how I can manage to transfer and receive functions.

Note: when I try to use it in this way, I get this error: TypeError: Object is not a function

4
  • You’re in the right direction, but instead of storing them as an array, store them as property objects const [searchTerm, setSearchTerm] = useState(""); const value = {searchTerm, setSearchTerm }; <UserProvider value={value}> and then use it like const { searchTerm, setSearchTerm } = useContext(UserContext);
    – ludwiguer
    Jun 13, 2020 at 23:52
  • I see your context value is not valid. Jun 14, 2020 at 0:08
  • @ludwiguer thanks for the answer. I didn't understand how you sent the function into value.
    – CanUver
    Jun 14, 2020 at 0:41
  • @ridoansaleh so ? how do I make it functional ?
    – CanUver
    Jun 14, 2020 at 0:42

2 Answers 2

10

The React Context is a mechanism for passing data through a React node tree without having to pass the props manually. The use of createContext creates a reference for a data structure within React's ecosystem that exposes a given data structure to the children nodes.

Context.Provider on the other hand provides a value to consuming components that are children nodes of the Provider. There are a few caveats to remember - whenever the properties of the value your provider is changing, it will trigger a re-render in all of its subscribers - it's descendants. The provider itself is not a hook, therefore when using hooks to generate values, you must re-render the provider with the new values set.


There are several things in your code that need to be addressed:

  1. Using useState in a Context.Provider,
  2. Returning the result of useState as the provider value, and
  3. The structure of data provided as the value to provider

Using useState in a Context.Provider

When consuming the result of useState within a react Context, you have to be aware of the implications of consumption in descendants, and the impact that it will have. React is very good at determining what to re-render and when, and it provides you with control to limit that behavour even more. useState however, is a react Functional Component Hook that will trigger a new render every time the value is updated. There are rules around this, precedence and delays, but you are guaranteed a re-render of whatever Functional Component consumes the useState hook. It's for this reason you want to treat your providers/context objects as pure functions where possible.

Returning the result of useState as the provider value

Within your example, you return the result of the useState call as-is to your context provider. This gives an object structure that React can't properly subscribe to and listen for changes.

The structure of data provided as the value to provider

When using state with your Provider, you need to return as proper JSON to the provider, so that that it can subscribe to value changes, and notify its descendants

Use

const providerValue = {
  expense,
  setExpense,
  clearItems
};
<ExpenseContext.Provider value={providerValue}/>

Instead of:

<ExpenseContext.Provider value = {
  [expense, setExpense],
  clearItems
} .../>

The object structure that you're providing the context provider is invalid. See example codepen.

Check out this great example on dev.to for useState with Context

0
3

How I said in the comment you're very close, you pass functions, objects and values the same way

  const [expenses, setExpenses] = useState([]);
  const clearItems = () => {
    setExpenses([]);
  };
  const value = { expenses, setExpenses, clearItems };
1
  • 1
    codesandbox not found.
    – Wes Guirra
    Dec 10, 2022 at 12:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.