diff --git a/examples/with-context-api/README.md b/examples/with-context-api/README.md
index 8df221519729f744ae77648aea312d223e58cf54..e615c32f124cef9fca5efe845894e88a5174d070 100644
--- a/examples/with-context-api/README.md
+++ b/examples/with-context-api/README.md
@@ -43,8 +43,8 @@ This example shows how to use react context api in our app.
It provides an example of using `pages/_app.js` to include the context api provider and then shows how both the `pages/index.js` and `pages/about.js` can both share the same data using the context api consumer.
-The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
+We start of by creating two contexts. One that actually never changes (`CounterDispatchContext`) and one that changes more often (`CounterStateContext`).
-The `pages/about.js` shows how to, from the about page, how to pass an increment value from the about page into the context provider itself.
+The `pages/index.js` shows how to, from the home page, increment and decrement the context data by 1 (a hard code value in the context provider itself).
-\*_Based on WesBos example_.
+The `pages/about.js` shows how to pass an increment value from the about page into the context provider itself.
diff --git a/examples/with-context-api/components/Counter.js b/examples/with-context-api/components/Counter.js
new file mode 100644
index 0000000000000000000000000000000000000000..a7c656d63fea19dc03dd65e538a5512d7f3b081e
--- /dev/null
+++ b/examples/with-context-api/components/Counter.js
@@ -0,0 +1,31 @@
+import React, { useReducer, useContext } from 'react'
+
+const CounterStateContext = React.createContext()
+const CounterDispatchContext = React.createContext()
+
+const reducer = (state, action) => {
+ switch (action.type) {
+ case 'INCREASE':
+ return state + 1
+ case 'DECREASE':
+ return state - 1
+ case 'INCREASE_BY':
+ return state + action.payload
+ default:
+ throw new Error(`Unkown action: ${action.type}`)
+ }
+}
+
+export const CounterProvider = ({ children }) => {
+ const [state, dispatch] = useReducer(reducer, 0)
+ return (
+
+
+ {children}
+
+
+ )
+}
+
+export const useCount = () => useContext(CounterStateContext)
+export const useDispatchCount = () => useContext(CounterDispatchContext)
diff --git a/examples/with-context-api/components/CounterProvider.js b/examples/with-context-api/components/CounterProvider.js
deleted file mode 100644
index f30a8468348513e8f21beedfcc34ddc199e5f886..0000000000000000000000000000000000000000
--- a/examples/with-context-api/components/CounterProvider.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { Component } from 'react'
-
-/* First we will make a new context */
-const CounterContext = React.createContext()
-
-/* Then create a provider Component */
-class CounterProvider extends Component {
- state = {
- count: 0,
- increase: () => {
- this.setState((state, props) => ({
- count: state.count + 1
- }))
- },
- increaseBy: val => {
- this.setState((state, props) => ({
- count: state.count + val
- }))
- },
- decrease: () => {
- this.setState((state, props) => ({
- count: state.count - 1
- }))
- }
- }
-
- render () {
- return (
-
- {this.props.children}
-
- )
- }
-}
-
-/* then make a consumer which will surface it */
-const CounterConsumer = CounterContext.Consumer
-
-export default CounterProvider
-export { CounterConsumer }
diff --git a/examples/with-context-api/pages/_app.js b/examples/with-context-api/pages/_app.js
index 6c91c12157541cb55e7e5ddffdffd8be6bd0a2be..58f0a59410b089f8a5281fefa75dfc535782c6db 100644
--- a/examples/with-context-api/pages/_app.js
+++ b/examples/with-context-api/pages/_app.js
@@ -1,12 +1,10 @@
import App from 'next/app'
-/* First we import our provider */
-import CounterProvider from '../components/CounterProvider'
+import { CounterProvider } from '../components/Counter'
class MyApp extends App {
render () {
const { Component, pageProps } = this.props
return (
- /* Then we wrap our components with the provider */
diff --git a/examples/with-context-api/pages/about.js b/examples/with-context-api/pages/about.js
index e37cdcdd351ae38e80b8edb21e51c2c8bc0f0fc5..5a93de32c99b2bb1a9b86cf93c6c42bca229ca43 100644
--- a/examples/with-context-api/pages/about.js
+++ b/examples/with-context-api/pages/about.js
@@ -1,33 +1,34 @@
-import React, { Component } from 'react'
-/* First we import the consumer */
-import { CounterConsumer } from '../components/CounterProvider'
+import React from 'react'
import Link from 'next/link'
+import { useCount, useDispatchCount } from '../components/Counter'
-export default class about extends Component {
- render () {
- return (
- /* Then we use our context through render props */
-
- {({ count, increase, increaseBy }) => (
-