client: stop unnecessary title re-renders in /new

client/components/new-post/drag-and-drop/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Text, useTheme, useToasts } from '@geist-ui/core'
-import { useCallback, useEffect } from 'react'
+import { memo, useCallback, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './drag-and-drop.module.css'
 import { Document } from '../'
@@ -170,4 +170,4 @@ function FileDropzone({ setDocs }: { setDocs: ((docs: Document[]) => void) }) {
     )
 }
 
-export default FileDropzone
+export default memo(FileDropzone)

client/components/new-post/index.tsx

@@ -24,6 +24,7 @@ const Post = () => {
         content: '',
         id: generateUUID()
     }])
+
     const [isSubmitting, setSubmitting] = useState(false)
 
     const remove = (id: string) => {
@@ -63,11 +64,10 @@ const Post = () => {
         setDocs(docs.map((doc) => doc.id === id ? { ...doc, content } : doc))
     }, [docs])
 
-    const uploadDocs = (files: Document[]) => {
+    const uploadDocs = useCallback((files: Document[]) => {
         // if no title is set and the only document is empty,
         const isFirstDocEmpty = docs.length === 1 && docs[0].title === '' && docs[0].content === ''
         const shouldSetTitle = !title && isFirstDocEmpty
-        console.log(shouldSetTitle, title, isFirstDocEmpty)
         if (shouldSetTitle) {
             if (files.length === 1) {
                 setTitle(files[0].title)
@@ -78,15 +78,15 @@ const Post = () => {
 
         if (isFirstDocEmpty) setDocs(files)
         else setDocs([...docs, ...files])
-    }
+    }, [docs, title])
+
 
     return (
         <div>
-            <Title title={title} handleChange={(e) => setTitle(e.target.value)} />
+            <Title title={title} setTitle={setTitle} />
             <FileDropzone setDocs={uploadDocs} />
             {
-                docs.map(({ id }) => {
+                docs.map(({ content, id, title }) => {
-                    const doc = docs.find((doc) => doc.id === id)
                     return (
                         <Document
                             remove={() => remove(id)}
@@ -94,8 +94,8 @@ const Post = () => {
                             editable={true}
                             setContent={(content) => updateContent(content, id)}
                             setTitle={(title) => updateTitle(title, id)}
-                            content={doc?.content}
+                            content={content}
-                            title={doc?.title}
+                            title={title}
                         />
                     )
                 })

client/components/new-post/title/index.tsx

@@ -14,11 +14,11 @@ const titlePlaceholders = [
 ]
 
 type props = {
-    handleChange?: (event: ChangeEvent<HTMLInputElement>) => void
+    setTitle: (title: string) => void
     title?: string
 }
 
-const Title = ({ handleChange, title }: props) => {
+const Title = ({ setTitle, title }: props) => {
 
     return (<div className={styles.title}>
         <Text h1 width={"150px"} className={styles.drift}>Drift</Text>
@@ -26,7 +26,7 @@ const Title = ({ handleChange, title }: props) => {
             <Input
                 placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
                 value={title || ""}
-                onChange={handleChange}
+                onChange={(event) => setTitle(event.target.value)}
                 height={"55px"}
                 font={1.5}
                 label="Post title"
@@ -36,4 +36,4 @@ const Title = ({ handleChange, title }: props) => {
     </div>)
 }
 
-export default Title
+export default memo(Title)