DEV Community


React Hooks: How to create and update Context.Provider

Eduardo Rabelo on October 27, 2018

If it is your first time hearing about "React Hooks", you can watch the React Conf introduction talk about it. It is worth it! I'll not spend to...
jeyloh profile image

Huge help! But I have a question regarding actions. The dispatch functions in App.js:
let inc = () => dispatch({ type: "increment" });

How can we move these in a separate function outside of the React component? I'm playing around with your example, and the Hooks/Context docs, but I'm still to find a nice pattern.

I wanted to move out my functions from App.js and useReducer inside these functions, before I realized Hooks are only supported in custom hooks and components.

Can I pass state and dispatch to the actions to use them, or name the actions like this "useAction1", "useAction2" etc. and then call these from the React component? Seems like an anti-pattern.

The reason I want to move them is to reuse actions from many components and only update the reducer state instead of returning data. My example consists of multiple API calls, localStorage etc.

Cheers, again - huge help with this article :)

nickempetvee profile image
NickEmpetvee • Edited

Great tutorial. I've run into an issue. Would you mind providing a little help? I've copied your code line for line, but into an environment created by create-react-app. Code here:

The error I get is:

React.useReducer is not a function
  22 | 
  23 | function ContextOneProvider(props) {
  24 |   // [A]
> 25 |   let [state, dispatch] = React.useReducer(reducer, initialState);
     |                                ^
  26 |   let value = { state, dispatch };
  27 | 
  28 |   // [B]
nickempetvee profile image

Solved! I was on an earlier version of React.

eecolor profile image

It seems your tutorial introduces the caveat described here:

This causes all consumers of the context to re-render each time.

antonio_pangall profile image
Antonio Pangallo • Edited

Hi Eduardo,
I would like to get your opinion on:

It reimplements redux's api using Hooks and Context.


domitriusclark profile image

Great reference! Thanks Eduardo.

kambleaa007 profile image
Ashish Kamble

do i need to npm i react-redux

kambleaa007 profile image
Ashish Kamble

done with this luve it

neillindberg profile image

This was a great help!
First step: Forget everything from the introduction to Hooks as a less complex way to create a singleton of sorts, per the React Docs.
Second step: Redirect to Eduardo's intro.

jmbl1685 profile image
Juan Batty

Great!! this helped me a lot, thanks.

visarts profile image
Brendan B • Edited

Could you show examples of how to use ContextOneConsumer? Or does the new useContext api eliminate the need for the Consumer?

danielkocean profile image

Seems you are right, "useContext accepts a context object (the value returned from React.createContext) and returns the current context value, as given by the nearest context provider for the given context."

oieduardorabelo profile image
Eduardo Rabelo Author

thanks for your time Richard and indeed we already have some abstractions like with a similar api