diff --git a/docs/src/demos/Examples/Default/React/index-nope.jsx b/docs/src/demos/Examples/Default/React/index-nope.jsx
index d654737d..171c75a0 100644
--- a/docs/src/demos/Examples/Default/React/index-nope.jsx
+++ b/docs/src/demos/Examples/Default/React/index-nope.jsx
@@ -1,143 +1,51 @@
-import * as React from 'react'
-import ReactDOM from 'react-dom'
-import { EditorState } from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
-import { Node, Schema } from 'prosemirror-model'
-// import applyDevTools from 'prosemirror-dev-tools'
-// import styled from 'styled-components'
+// export default () => {
+//   const editor = useEditor({
+//     content: '<p>hello react</p>',
+//     onTransaction() {
+//       // console.log('update', this)
+//     },
+//     extensions: [
+//       ...defaultExtensions(),
+//       // Paragraph.extend({
+//       //   addNodeView() {
+//       //     return reactNodeView(() => {
+//       //       // useEffect(() => {
+//       //       //   console.log('effect')
+//       //       // }, []);
 
-// Here we have the (too simple) React component which
-// we'll be rendering content into.
-//
-class Underlined extends React.Component {
-  constructor(props) {
-    super(props)
-    this.hole = React.createRef()
-  }
-  // We'll put the content into what we render using
-  // this function, which appends a given node to
-  // a ref HTMLElement, if present.
-  //
-  append(node) {
-    if (this.hole) {
-      this.hole.current.appendChild(node)
-    }
-  }
+//       //       return (
+//       //         <p className="jooo" data-node-view-wrapper>
+//       //           <span data-node-view-content></span>
+//       //         </p>
+//       //       )
+//       //     })
+//       //     return ReactNodeViewRenderer(() => {
+//       //       // useEffect(() => {
+//       //       //   console.log('effect')
+//       //       // }, []);
 
-  render() {
-    // Just really wanted to prove I could get React AND
-    // styled-component abilities at the same time.
-    //
-    // const UnderlinedText = styled.p`
-    //   text-decoration: underline;
-    // `
+//       //       return (
+//       //         <p className="jooo" data-node-view-wrapper>
+//       //           <span data-node-view-content></span>
+//       //         </p>
+//       //       )
+//       //     })
+//       //   },
+//       // }),
+//     ]
+//   })
 
-    // The styled components version is basically just a wrapper to do SCSS styling.
-    // Questionable if it's even needed for such simple styling and because you can't clearly see the
-    // DOM structure from the code (hence making `& > ${Component}` selectors quite unintuitive)
-    // return <span style="text-decoration: underline" ref={this.hole} />
-    return <p ref={this.hole} style={{textDecoration: 'underline'}}></p>
-  }
-}
-
-// This class is our actual interactor for ProseMirror itself.
-// It glues DOM rendering, React, and ProseMirror nodes together.
-//
-class Underline {
-  constructor(node) {
-    // We'll use this to access our Underlined component's
-    // instance methods.
-    //
-    this.ref = React.createRef()
-
-    // Here, we'll provide a container to render React into.
-    // Coincidentally, this is where ProseMirror will put its
-    // generated contentDOM.  React will throw out that content
-    // once rendered, and at the same time we'll append it into
-    // the component tree, like a fancy shell game.  This isn't
-    // obvious to the user, but would it be more obvious on an
-    // expensive render?
-    //
-    this.dom = document.createElement('span')
-
-    // Finally, we provide an element to render content into.
-    // We will be moving this node around as we need to.
-    //
-    this.contentDOM = document.createElement('span')
-
-    // Better way of doing this would be portals https://reactjs.org/docs/portals.html
-    ReactDOM.render(
-      <Underlined ref={this.ref} />,
-      this.dom,
-      this.putContentDomInRef
-    )
-  }
-
-  update(node) {
-    return true
-  }
-
-  // This is the least complex part.  Now we've put
-  // all of our interlocking pieces behind refs and
-  // instance properties, this becomes the callback
-  // which performs the actual shell game.
-  //
-  putContentDomInRef = () => {
-    this.ref.current.append(this.contentDOM)
-  }
-
-  // Required to not to leave the React nodes orphaned.
-  destroy() {
-    ReactDOM.unmountComponentAtNode(this.dom)
-  }
-}
-
-export default class Editor extends React.Component {
-  constructor(props) {
-    super(props)
-    this.editorState = EditorState.create({
-      schema: new Schema({
-        nodes: {
-          doc: {
-            content: 'block+'
-          },
-          underline: {
-            group: 'block',
-            content: 'inline*',
-            parseDOM: [{ tag: 'p' }],
-            toDOM() { return ['p', 0] }
-          },
-          text: {
-            group: 'inline'
-          },
-        }
-      })
-    })
-  }
-
-  createEditorView = (element) => {
-    if (element != null) {
-      this.editorView = new EditorView(element, {
-        nodeViews: {
-          underline: (node) => new Underline(node)
-        },
-        state: this.editorState,
-      })
-      // applyDevTools(this.editorView)
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.editorView) {
-      this.editorView.destroy()
-    }
-  }
-
-  shouldComponentUpdate() {
-    return false
-  }
-
-  render() {
-    return <div id="editor" ref={ref => { this.createEditorView(ref) }} />
-  }
-}
+//   return (
+//     <>
+//       { editor &&
+//         <button
+//           onClick={() => editor.chain().focus().toggleBold().run()}
+//           className={editor.isActive('bold') ? 'is-active' : ''}
+//         >
+//           bold
+//         </button>
+//       }
+//       <EditorContent editor={editor} />
+//     </>
+//   )
+// }
diff --git a/docs/src/demos/Examples/Default/React/index.jsx b/docs/src/demos/Examples/Default/React/index.jsx
index 8274e29f..3f8d89df 100644
--- a/docs/src/demos/Examples/Default/React/index.jsx
+++ b/docs/src/demos/Examples/Default/React/index.jsx
@@ -1,84 +1,168 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
-import Paragraph from '@tiptap/extension-paragraph'
-import { Editor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
 import './styles.scss'
-import { render, unmountComponentAtNode } from 'react-dom'
 
-const useEditor = (options = {}) => {
-  const [editor, setEditor] = useState(null)
-
-  useEffect(() => {
-    const instance = new Editor(options)
-    setEditor(instance)
-
-    return () => {
-      instance.destroy()
-    }
-  }, [])
-
-  return editor
-}
-
-
-
-function reactNodeView(Component) {
-  const renderComponent = (props, dom) => render(<Component {...props} />, dom)
-
-  return (node, view, getPos, decorations) => {
-    let dom = document.createElement("div")
-    renderComponent({ node, view, decorations, getPos }, dom)
-
-    console.log(dom)
-    return {
-      dom,
-      contentDOM: dom.querySelector('[data-node-view-content]'),
-      update(node, decorations) {
-        renderComponent({ node, view, decorations, getPos }, dom)
-        return true
-      },
-      destroy() {
-        unmountComponentAtNode(dom)
-      },
-    }
+const MenuBar = ({ editor }) => {
+  if (!editor) {
+    return null
   }
+
+  return (
+    <>
+      <button
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        className={editor.isActive('bold') ? 'is-active' : ''}
+      >
+        bold
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        className={editor.isActive('italic') ? 'is-active' : ''}
+      >
+        italic
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        className={editor.isActive('strike') ? 'is-active' : ''}
+      >
+        strike
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        className={editor.isActive('code') ? 'is-active' : ''}
+      >
+        code
+      </button>
+      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
+        clear marks
+      </button>
+      <button onClick={() => editor.chain().focus().clearNodes().run()}>
+        clear nodes
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setParagraph().run()}
+        className={editor.isActive('paragraph') ? 'is-active' : ''}
+      >
+        paragraph
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+      >
+        h1
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+      >
+        h2
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+      >
+        h3
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+      >
+        h4
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+      >
+        h5
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+      >
+        h6
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        className={editor.isActive('bulletList') ? 'is-active' : ''}
+      >
+        bullet list
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        className={editor.isActive('orderedList') ? 'is-active' : ''}
+      >
+        ordered list
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        className={editor.isActive('codeBlock') ? 'is-active' : ''}
+      >
+        code block
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        className={editor.isActive('blockquote') ? 'is-active' : ''}
+      >
+        blockquote
+      </button>
+      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+        horizontal rule
+      </button>
+      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
+        hard break
+      </button>
+      <button onClick={() => editor.chain().focus().undo().run()}>
+        undo
+      </button>
+      <button onClick={() => editor.chain().focus().redo().run()}>
+        redo
+      </button>
+    </>
+  )
 }
 
 export default () => {
   const editor = useEditor({
-    content: '<p>hello react</p>',
     extensions: [
       ...defaultExtensions(),
-      Paragraph.extend({
-        addNodeView() {
-          return reactNodeView(() => {
-            // useEffect(() => {
-            //   console.log('effect')
-            // }, []);
-
-            return (
-              <p className="jooo" data-node-view-wrapper>
-                <span data-node-view-content></span>
-              </p>
-            )
-          })
-          return ReactNodeViewRenderer(() => {
-            // useEffect(() => {
-            //   console.log('effect')
-            // }, []);
-
-            return (
-              <p className="jooo" data-node-view-wrapper>
-                <span data-node-view-content></span>
-              </p>
-            )
-          })
-        },
-      }),
-    ]
+    ],
+    content: `
+      <h2>
+        Hi there,
+      </h2>
+      <p>
+        this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+      </p>
+      <ul>
+        <li>
+          That’s a bullet list with one …
+        </li>
+        <li>
+          … or two list items.
+        </li>
+      </ul>
+      <p>
+        Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+      </p>
+      <pre><code class="language-css">body {
+  display: none;
+}</code></pre>
+      <p>
+        I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+      </p>
+      <blockquote>
+        Wow, that’s amazing. Good work, boy! 👏
+        <br />
+        — Mom
+      </blockquote>
+    `,
   })
 
   return (
-    <EditorContent editor={editor} />
+    <div>
+      <MenuBar editor={editor} />
+      <EditorContent editor={editor} />
+    </div>
   )
 }
diff --git a/packages/react/src/EditorContent.jsx b/packages/react/src/EditorContent.jsx
index e7395037..64044ad6 100644
--- a/packages/react/src/EditorContent.jsx
+++ b/packages/react/src/EditorContent.jsx
@@ -31,7 +31,9 @@ import { Editor } from './Editor'
 //   )
 // }
 
-export class EditorContent extends React.Component {
+
+
+export class PureEditorContent extends React.Component {
   constructor(props) {
     super(props)
     this.editorContentRef = React.createRef()
@@ -69,3 +71,6 @@ export class EditorContent extends React.Component {
     )
   }
 }
+
+
+export const EditorContent = React.memo(PureEditorContent);
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 27fc78c4..27e45903 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -1,9 +1,7 @@
 // @ts-nocheck
 export * from '@tiptap/core'
 export { Editor } from './Editor'
-// export {
-//   Editor, EditorContext, useEditor,
-// } from './components/Editor'
+export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'
 export * from './EditorContent'
diff --git a/packages/react/src/useEditor.ts b/packages/react/src/useEditor.ts
new file mode 100644
index 00000000..a4b9ac33
--- /dev/null
+++ b/packages/react/src/useEditor.ts
@@ -0,0 +1,31 @@
+// @ts-nocheck
+
+import { useState, useEffect } from 'react'
+import { Editor } from './Editor'
+
+function useForceUpdate() {
+  const [_, setValue] = useState(0)
+
+  return () => setValue(value => value + 1)
+}
+
+export const useEditor = (options = {}) => {
+  const [editor, setEditor] = useState(null)
+  const forceUpdate = useForceUpdate()
+
+  useEffect(() => {
+    const instance = new Editor(options)
+
+    setEditor(instance)
+
+    instance.on('transaction', () => {
+      forceUpdate()
+    })
+
+    return () => {
+      instance.destroy()
+    }
+  }, [])
+
+  return editor
+}