diff --git a/docs/walkthroughs/04-applying-custom-formatting.md b/docs/walkthroughs/04-applying-custom-formatting.md
index d722121b0..c00958b37 100644
--- a/docs/walkthroughs/04-applying-custom-formatting.md
+++ b/docs/walkthroughs/04-applying-custom-formatting.md
@@ -7,6 +7,15 @@ In this guide, we'll show you how to add custom formatting options, like **bold*
 So we start with our app from earlier:
 
 ```jsx
+const renderElement = (props) => {
+  switch (props.element.type) {
+    case 'code':
+      return <CodeElement {...props} />
+    default:
+      return <DefaultElement {...props} />
+  }
+})
+
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -16,15 +25,6 @@ const App = () => {
     },
   ])
 
-  const renderElement = useCallback(props => {
-    switch (props.element.type) {
-      case 'code':
-        return <CodeElement {...props} />
-      default:
-        return <DefaultElement {...props} />
-    }
-  }, [])
-
   return (
     <Slate editor={editor} value={value} onChange={value => setValue(value)}>
       <Editable