60
<MyContext.Consumer>
    {value => { }}
</MyContext.Consumer>

VS

let value = useContext(MyContext);

What is the difference between this two snippets, using Context.Consumer and using useContext hook to access values passed by the context Provider? I think useContext will subscribe to the context Provider, since we passed the Context as an argument, so that it will trigger a re-render, when the provider value changes.

2
  • Isn't first one is for Class component and 2nd one is for functional component ?
    – vikramvi
    Apr 26, 2021 at 11:35
  • Is there any way we can skip both and have context value directly? I mean get it from createContext Aug 2, 2022 at 7:02

1 Answer 1

61

That is correct. They will do basically the same thing.

In my opinion, the useContext hook has a much nicer and readable syntax.

From React Docs:

https://reactjs.org/docs/hooks-reference.html#usecontext

useContext

const value = useContext(MyContext); Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

When the nearest <MyContext.Provider> above the component updates, this Hook will trigger a rerender with the latest context value passed to that MyContext provider.

Also from React Docs:

https://reactjs.org/docs/context.html

Context.Consumer

<MyContext.Consumer>
 {value => /* render something based on the context value */}
</MyContext.Consumer>

A React component that subscribes to context changes. This lets you subscribe to a context within a function component.

UPDATE:

From: http://brianyang.com/react-hooks-a-deeper-dive-featuring-usecontext-and-usereducer/

From: https://testdriven.io/blog/react-hooks-advanced/

The new useContext hook to consume context does not change the concepts surrounding context, hence the plunge above. This context hook only gives us an extra, much prettier, way to consume context. It's amazingly helpful when applying it to components consuming multiple contexts.

8
  • Thanks. So if both subscribes to the context, what is the basic difference? Not regarding syntax. Jun 29, 2019 at 11:41
  • This article might help: I'll add it to the answer. brianyang.com/… Jun 29, 2019 at 12:04
  • @Bastiat Isn't first one is for Class component and 2nd one is for functional component ?
    – vikramvi
    Apr 26, 2021 at 11:36
  • 2
    @vikramvi yes and no, you need to use Context.consumer with class components because you cannot use a hook inside a class component. However, the consumer simply passes values to the function, as you see in the example above, but the Consumer component doesnt know or care what is returned from that function. it could return class or functional components. In the end, it's just handing out values. As mentioned though, Hooks tend to me much cleaner especially if you have multiple providers.
    – Bastiat
    Apr 28, 2021 at 11:27
  • 2
    @Bastiat ` it will only rerender when those selected items change. . Component always re-rendered even if we use Context.Consumer`, please check codesandbox.io/s/lpk7xrwnmm?file=/src/App.js. May 27, 2021 at 13:30

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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.