From 2fa928103ddadae2638afe589f2948f795726d3c Mon Sep 17 00:00:00 2001
From: "Ind. Puking Rainbows"
 <50537727+pukingrainbows@users.noreply.github.com>
Date: Wed, 18 Aug 2021 15:59:31 -0700
Subject: [PATCH] Proposal for Remove useCallback from walkthroughs
 documentation (#4091)

* Proposal for Remove useCallback from walkthroughs

I have seen in the walkthrough the use of `useCallback` but I don't think are need it, and add a small complexity while understanding the concept, if we moved out the function outside of the component will be stable and will not require to maintain either referential identity or calculated complex logic.

If people think this is a good idea I can go and update all documentation to remove unnecessary `useCallback` from the example.

unless I'm missing something.

* Update docs/walkthroughs/04-applying-custom-formatting.md

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
---
 .../04-applying-custom-formatting.md           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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