title: Clear form input fields after submit it to firestore?
body: <p>I'm trying to create a simple CRUD application with react and Firestore (new to both).
  I never used react with db, so previously I would simply set the state of title and content to &quot;&quot; after submit, but that's create a loop with Firestore onSnapshot. I could wrap it in form and use preventDefault(), but (possibly my mistake) it created strange outcome unless I left behind async. I'm thinking about this issue for a few days and yet to find the right answer to it. Maybe I could prevent Firestore to accept and save empty strings? That cant be a reasonable answer as it would create an extra loop front to back for no other reason than my shortcoming. I think the answer should be some sort of a conditionally state setting, but that's just a guess again. Now I`ve watched quite a few hours a tutorials on youtube, but they all leave out this issue, which I think its a bit silly. I would like to find the answer to it as even though I might could come up with something that will work, but I really like to see the common use case of it which defo will be more elegant than my trial and error solution. Thank you in advance!</p>
  <pre><code>function App() {
  
    const [newTitle, setNewTitle] = useState(&quot;&quot;)
    const [newContent, setNewContent] = useState(&quot;&quot;)
    const [users, setUsers] = useState([]);
  
    const usersCollectionRef = collection(db, &quot;users&quot;)
  
    useEffect(
      () =&gt;
        onSnapshot(collection(db, &quot;users&quot;), (snapshot) =&gt;
          setUsers(snapshot.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id })))
        ),
      []
    );
  
    const createEntry = async () =&gt; {
          await addDoc(usersCollectionRef, { Title: newTitle, Content: newContent })
    }
  
    return (
  
      &lt;div&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Title&quot; onChange={event =&gt; { setNewTitle(event.target.value)} }/&gt;
          &lt;textarea type=&quot;text&quot; placeholder=&quot;Content&quot; onChange={event =&gt; { setNewContent(event.target.value) } }/&gt; 
          &lt;button onClick={createEntry}&gt; Add &lt;/button&gt;
  
         {users.map((user) =&gt; {
          return (
            &lt;div className=&quot;note&quot;&gt;
              &lt;h1&gt; {user.Title} &lt;/h1&gt;
              &lt;p&gt;{user.Content}&lt;/p&gt;
            &lt;/div&gt;
          )
        })}
      &lt;/div&gt;
    );
  }
  </code></pre>