Add usage example for useContext.

[Jimmydalecleveland]

The intent of this PR is to show where the useContext hook fits in to the usual Context usage. As I've been training co-workers and friends I've had a few ask me how to use the useContext hook, even after they have looked at the docs and scoured the internet for a "minimal" example. I believe the problem stems from newer developers who have not used Context before, or developers who used Redux and avoided Context but want to try it now with hooks.

I've been asked a couple times if you still need a Provider or a Consumer and where the hook fits in. I deliberated on where to place this example for a bit, but it seems that the docs don't mention hooks at all in any of the previous posted articles (such as the Context page under Advanced Guides).

Finally, I tried to use the existing intro code example in Advanced Guides > Context but it obviously didn't make sense to mix classes with hooks or to call a Button component and pass it a value from context rather than just using context inside the actual component using it, so I made some modifications.

Let me know if there are any changes you'd like me to make, happy to oblige. Here are the before and afters if it helps.

"Before" screenshot

"After" screenshot

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[reactjs-bot]

Deploy preview for reactjs ready!

Built with commit ee639d3

https://deploy-preview-2414--reactjs.netlify.com

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[alexkrolick]

Seems good to me. Either a similar example or link to here should probably be added to the main context page.

@sophiebits @bvaughn 👀

[Jimmydalecleveland]

@alexkrolick I'm happy to update the current PR or open a new one for the Context page. Just let me know which you'd prefer and if it should be a link or full example there.

[hg-pyun]

Need full text.

[alexkrolick]

I think a full example would be best as that is the main reference page in the long run. Check with @nickmccurdy to see if he already has a patch for that page with hooks.

[nickserv]

I changed the Class.contextType example to use React.useContext instead:
https://github.com/nickmccurdy/reactjs.org/blob/migrate-to-hooks/content/docs/context.md#reactusecontext-reactusecontext

function MyComponent {
  const value = React.useContext(MyContext);

  useEffect(() => {
    /* perform a side-effect at mount using the value of MyContext */

    return () => {
      /* ... */
    };
  }, []);

  useEffect(() => {
    /* ... */
  });

  /* render something based on the value of MyContext */
}

You're welcome to add a suggestion to the hooks migration pull request or borrow this code, but for updating the current docs I think it's better to keep everything in one place in the hooks section so users can easily find it.

[Jimmydalecleveland]

Oh, sorry. I didn't see that this was already being tackled. I actually thought it made more sense to have the example on the Context page, but noticed that hooks seemed to be pretty separated from the docs that came before it and figured it might be intentional.

Having a link from the useContext API section to the main Context page might be enough then. I'm fine with closing this PR if you don't think it brings any value to that page.

[alexkrolick]

It's not totally being tackled, @nickmccurdy's branch is a very tentative rewrite to emphasize hooks. I just thought you could reuse the example from that branch if there was one.

I think linking both pages together along with your change will be fine for now.

[nickserv]

Yea, I still think this is a good approach for now without the hooks migration. Personally I don't think we need a link since all the hooks content is currently only in the hooks section, and Context.Consumer still works with hooks.

[alexkrolick]

This is a broader discussion but I think we should trend towards including Hooks options in the Advanced Guides for topics that now have hook APIs - ie if you want to learn about context you shouldn't have to know to check in the Hooks section to see if there is something in there.

[Jimmydalecleveland]

@alexkrolick I definitely agree with your sentiment on not having to check the Hooks section for relevant info, for what my 2 cents is worth.

I think the example @nickmccurdy linked is great where it's at, but I was actually trying to also solve the problem I briefly mentioned in the opening comment: People have asked me a few times how it all fits together (Context) with the useContext hook, so I wanted to provide a quick complete example taking elements from the Context page. This is obviously anecdotal experience, and I am not positive that where I added the example is the best place, I just wanted to take a stab at it.

Let me know what actions you'd like me to take and I'll wrap this up.